Anexar conteúdo HTML ao elemento HTML existente usando JavaScript

Para adicionar conteúdo a um elemento existente, escolha a API de acordo com o que você tem: use appendChild() para adicionar um nó do DOM ou insertAdjacentHTML() para interpretar e inserir uma string HTML em uma posição específica. Atribuir um valor a innerHTML substitui os nós descendentes do elemento; portanto, essa não é a opção adequada quando você precisa preservar os filhos existentes.

Desvantagem de usar innerHTML para adicionar um novo nó HTML

Definir o valor de innerHTML de um elemento interpreta a string atribuída e substitui os nós descendentes desse elemento. Isso pode descartar o estado mantido por esses nós e os ouvintes de eventos associados diretamente a eles. Isso não significa que todos os atributos do elemento-alvo sejam removidos: o próprio elemento permanece, enquanto seus filhos são substituídos.

Tanto innerHTML quanto insertAdjacentHTML() interpretam strings como marcação HTML. Se uma string incluir dados não confiáveis, isso poderá criar um risco de cross-site scripting (XSS). Prefira criar nós e atribuir valores fornecidos pelo usuário a propriedades de texto, como textContent; se for necessário inserir marcação, sanitize-a com uma abordagem adequada à aplicação. Consulte as considerações de segurança de innerHTML da MDN.

Adicionar conteúdo HTML sem substituir os elementos do DOM

Para inserir um elemento recém-criado, crie um nó e insira-o na árvore existente. Para uma string HTML confiável, use insertAdjacentHTML() e escolha o ponto de inserção. Essas abordagens adicionam conteúdo sem substituir os nós descendentes existentes do elemento-alvo. Os exemplos a seguir usam um pequeno formulário de endereço para mostrar as duas opções.

Usar appendChild() para acrescentar conteúdo HTML em JavaScript

appendChild() recebe um nó, não uma string HTML. Ele coloca esse nó depois do último filho atual do elemento-alvo. Se o nó já pertencer a outra parte do documento, acrescentá-lo move o mesmo nó, em vez de criar uma cópia.

Execute este exemplo:

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

function addAddressLine(addressContainer, lineCount) {
  const input = document.createElement("input");
  input.type = "text";
  input.placeholder = `Address Line ${lineCount}`;
  addressContainer.appendChild(input);
}

if (typeof document !== "undefined") {
  let lineCount = 0;
  const button = document.getElementById("add-address");
  const addressContainer = document.getElementById("address");

  button.addEventListener("click", () => {
    addAddressLine(addressContainer, ++lineCount);
  });
}

Coloque o script depois deste formulário ou carregue-o com defer, para que os elementos existam antes de o script procurá-los:

<form>
  <label>Name: <input id="name" type="text"></label>
  <div id="address">
    <label>Address: <input id="contact" type="text"></label>
  </div>
  <button id="add-address" type="button">Add Address Line</button>
</form>

O manipulador de clique incrementa o número da linha e acrescenta um novo campo de texto ao elemento address. Os campos originais de nome e endereço permanecem no lugar. O atributo type="button" impede que o botão envie o formulário.

Observação

append() é outra opção: aceita nós e strings de texto, mas um argumento string é inserido como texto, sem ser interpretado como HTML. Use appendChild() quando o nó retornado for útil ou quando o código precisar da operação já estabelecida para inserir um único nó. O suporte dos navegadores não é abordado aqui; verifique os navegadores-alvo se a aplicação tiver esse requisito.

Usar insertAdjacentHTML() para inserir HTML em uma posição específica

Chame target.insertAdjacentHTML(position, htmlString) para interpretar uma string e inserir a marcação resultante em relação a target:

• beforebegin insere imediatamente antes do elemento-alvo. O alvo precisa ter um elemento pai.
• afterbegin insere dentro do alvo, antes do primeiro filho.
• beforeend insere dentro do alvo, depois do último filho. Esta é a posição usada para acrescentar marcação.
• afterend insere imediatamente depois do elemento-alvo. O alvo precisa ter um elemento pai.

Por exemplo, isto insere um novo campo de endereço no final do contêiner de endereço:

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

if (typeof document !== "undefined") {
  const addressContainer = document.getElementById("address");
  addressContainer.insertAdjacentHTML(
    "beforeend",
    '<input type="text" placeholder="Additional address line">'
  );
}

Ao contrário de appendChild(), este método interpreta o segundo argumento como HTML. Use-o somente quando a string for confiável ou tiver sido sanitizada com segurança; não concatene texto não confiável na marcação. Para conteúdo digitado pelo usuário, crie um elemento, defina textContent ou outras propriedades apropriadas e, em seguida, acrescente o nó.