JavaScript anexar dados ao Div

Para acrescentar dados a um div existente, selecione-o e escolha um método conforme o novo valor seja texto simples ou HTML confiável. Para texto comum, textContent ou um nó de texto evita a análise de HTML. Use insertAdjacentHTML quando quiser inserir marcação intencionalmente. Os exemplos abaixo pressupõem que a página contém um elemento <div id="myDiv"> antes da execução do script. (JavaScript)

Escolha um método conforme o conteúdo que você vai adicionar

Use textContent ou createTextNode para entradas do usuário e outros textos simples. Essas APIs criam texto, sem interpretar caracteres como < como marcação. Para criar um elemento com texto ou atributos, crie-o e anexe-o como nó.

Use insertAdjacentHTML quando tiver uma string HTML controlada e precisar que ela seja analisada como elementos. Evite innerHTML += para acrescentar conteúdo a um elemento que já tenha conteúdo: ler e definir innerHTML novamente analisa seu conteúdo e substitui os nós descendentes. Esses nós deixam de fazer parte da árvore substituída, mas as referências JavaScript existentes continuam apontando para os nós destacados. Os ouvintes permanecem associados aos nós antigos; eles não se aplicam aos nós substitutos. A escolha depende do tipo de conteúdo, não de uma classificação geral de velocidade.

Acrescente texto simples com textContent ou appendChild

Este exemplo cria um parágrafo, define seu texto e anexa o novo nó ao div selecionado. getElementById retorna null se a página não tiver um elemento correspondente; por isso, verifique o resultado antes de usá-lo.

Execute este exemplo em uma página que contenha o elemento de destino:

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    const paragraph = document.createElement("p");
    paragraph.textContent = "A new paragraph.";
    target.appendChild(paragraph);
  }
}

Este exemplo de navegador não foi executado no material fornecido. Quando o elemento de destino existe, ele adiciona um parágrafo cujo conteúdo é texto. Você também pode criar diretamente um nó de texto com document.createTextNode("More text") e passar esse nó para appendChild quando não precisar de um elemento contêiner.

Acrescente HTML com insertAdjacentHTML

Chame insertAdjacentHTML no elemento de destino e passe uma posição e uma string HTML. beforeend insere os nós analisados dentro do div, depois dos filhos existentes. As outras posições são afterbegin (dentro do elemento, antes dos filhos), beforebegin (imediatamente fora do elemento, antes dele) e afterend (imediatamente fora do elemento, depois dele).

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.insertAdjacentHTML("beforeend", "<p>A new paragraph.</p>");
  }
}

Este exemplo de navegador não foi executado no material fornecido. Use esse método somente quando a intenção for analisar a string fornecida como HTML; ele não sanitiza entradas não confiáveis. A posição beforeend é a indicada quando a nova marcação deve ficar dentro do div, no final do conteúdo.

Use innerHTML com cuidado

innerHTML expõe a marcação de um elemento como string. Concatenar uma string e atribuí-la de volta pode parecer uma forma de acrescentar conteúdo, mas o navegador analisa a marcação e substitui os nós descendentes do elemento. Os nós descendentes existentes deixam de fazer parte da árvore substituída, mas as referências continuam apontando para os nós antigos, destacados, e seus ouvintes permanecem associados a eles; esses ouvintes não se aplicam aos nós substitutos. Evite usar innerHTML com dados não confiáveis, pois o navegador trata o valor como marcação, o que pode criar vulnerabilidades de cross-site scripting (XSS).

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.innerHTML = target.innerHTML + "<p>A new paragraph.</p>";
  }
}

Este exemplo de navegador não foi executado no material fornecido. Ele ilustra o comportamento da reatribuição; não é a forma preferida de preservar os nós filhos existentes ao acrescentar conteúdo. Para texto dinâmico, crie um elemento, defina seu textContent e anexe o elemento.

Acrescente conteúdo com jQuery

Se o projeto já usa jQuery, .append() acrescenta conteúdo ao final de cada elemento correspondente. Uma string passada para .append() é analisada como HTML; por isso, não passe strings não confiáveis. Para texto simples, crie um nó DOM e anexe-o, ou use a abordagem nativa com textContent apresentada acima.

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

if (typeof window !== "undefined" && window.jQuery) {
  const target = jQuery("#myDiv");
  if (target.length) {
    target.append("<p>A new paragraph.</p>");
  }
}

Este exemplo de navegador não foi executado no material fornecido. Ele requer que jQuery esteja carregado e que exista um elemento correspondente; se qualquer uma dessas condições faltar, o código protegido não faz nada.

Verifique o resultado e evite erros comuns

Confirme que o seletor encontra o elemento pretendido e que o script é executado depois que esse elemento fica disponível. Por exemplo, coloque o script depois do div ou aguarde o carregamento do documento. getElementById("myDiv") seleciona um elemento pelo ID; querySelector("#myDiv") é uma alternativa equivalente baseada em seletor. Trate a ausência de correspondência antes de chamar um método no resultado.

Para texto simples, prefira textContent ou um nó de texto, para que os caracteres continuem sendo texto. Para marcação, use insertAdjacentHTML("beforeend", html) para inserir no final, dentro do elemento de destino, e garanta que o HTML seja confiável ou sanitizado por uma política apropriada. Não trate innerHTML += como uma operação de anexação que preserva os nós. Escolha .append() de jQuery somente se o projeto já incluir jQuery e o conteúdo tiver a intenção de ser analisado como HTML. Esses métodos servem para acrescentar conteúdo; remover um elemento é uma operação DOM distinta.