Anexar conteúdo HTML ao elemento HTML existente usando JavaScript

1. Desvantagem de usar InnerHTML para adicionar um novo nó HTML
2. Adicionar conteúdo HTML sem substituir os elementos DOM
3. Usando appendChild() para acrescentar conteúdo HTML em JavaScript
4. Usando insertAdjacentHTML() para adicionar o nó HTML

Adicionar conteúdo HTML a um div ou outro elemento HTML com javascript é fácil. Podemos definir a propriedade HTMLElement.innerHTML do elemento com o novo conteúdo HTML. Mas durante o processo, ele apagará todos os atributos dinâmicos adicionados a ele.

Desvantagem de usar InnerHTML para adicionar um novo nó HTML

• O HTMLElement.innerHTML funciona excluindo o conteúdo HTML dentro do elemento e, em seguida, adicionando-o novamente com o novo pedaço de HTML incluído nele. Em essência, ele substitui o conteúdo HTML em vez de apenas adicionar um novo.
• Quando adicionamos um novo elemento HTML ao DOM com a propriedade innerHTML, ele também remove todos os nós descendentes e os substitui pelos novos nós construídos analisando o novo conteúdo HTML (a string HTML que é atribuída à propriedade innerHTML) e renderizar todo o HTML novamente.
• Não é muito conhecido que ao usar innerHTML em um projeto que passa por uma revisão de segurança cibernética, o código pode ser rejeitado. É aconselhável não usar innerHTMl diretamente, pois pode apresentar um risco de segurança potencial (para obter mais detalhes, consulte o link MDN).

Adicionar conteúdo HTML sem substituir os elementos DOM

Para adicionar um pedaço de código HTML ao nosso DOM existente, podemos usar as seguintes funções integradas do javascript sem medo de perder qualquer conteúdo dinâmico já anexado a elas.

• appendChild()
• insertAdjacentHTML()

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

appendChild() tem o mesmo propósito que o innerHTML. Podemos usar esses dois métodos para adicionar conteúdo HTML a um nó. A diferença entre as duas abordagens é que appendChild() é uma função, enquanto innerHTML é uma propriedade. appendChild() adicionará um nó ao elemento DOM existente em vez de substituir o conteúdo do DOM como feito pela propriedade innerHTML.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="adress">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;
addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.appendChild(i);
}

Criamos um formulário para capturar o name e address do usuário usando o código acima. O endereço geralmente tem mais de uma linha. Portanto, criamos um botão que adiciona novos campos de entrada quando clicado para capturar essas linhas de endereço adicionais. A seguir está o processo seguido para criar um novo campo de entrada.

1. Chamamos a função addAddressLine no evento click do botão Add Address Line.
2. Na função, criamos HTML input dinamicamente com a função document.createElement('input'). Ele retorna o elemento input criado que é armazenado na variável i.
3. Em seguida, definimos os atributos type e placeholder para a variável input criada com o método setAttribute().
4. Temos o elemento input pronto para ser adicionado à estrutura div existente. Portanto, consultamos o address div usando docuemnt.getElementById() que retorna a estrutura div como um todo e, em seguida, usamos a função appendChild(i) do JavaScript.
5. A função appendChild(i) adiciona o elemento input criado dinamicamente mantido pela variável i e o coloca no final do address div. Usamos lineCount para incrementar o valor do marcador cada vez que adicionamos um novo campo de entrada.

Observação

• Também podemos usar o método mais recente append() para anexar o elemento criado ao DOM. O método javascript append nos permite usar DOMString (textos de string simples) como um argumento e não retorna nenhum valor. Esteja ciente de que o navegador Internet Explorer não oferece suporte ao método append() mais recente.
• Todos os navegadores modernos, incluindo o Internet Explorer, suportam a função appendChild() mais antiga.

Usando insertAdjacentHTML() para adicionar o nó HTML

As funções appendChild() e até mesmo as funções append() são capazes de adicionar novos elementos a um determinado nó HTML. Ambos os métodos inserem o elemento após o último filho. Pode não ser útil para todos os cenários. Especialmente se quisermos adicionar o nó HTML em uma posição especificada na estrutura HTML. Para tais casos, a função insertAdjacentHTML() pode ser usada. Leva alguns parâmetros, a posição e o texto nessa posição.

• Position: insertAdjacentHTML suporta quatro valores no parâmetro de posição.

  • beforebegin: para inserir o nó HTML antes do início do elemento.
  • afterbegin: Como o nome sugere, esta opção insere o elemento logo após a tag de abertura do nó selecionado e o coloca antes do primeiro filho.
  • beforeend: Este é semelhante ao appendChild(). Como o nome sugere, a posição beforeend coloca o elemento logo após o último filho.
  • afterend: refere-se à posição após o fechamento da tag do nó HTML de destino.

• String: podemos inserir o HTML no formato de string como um segundo parâmetro. Por exemplo: <div> Hello World!</div>.
  À primeira vista, a representação é a seguinte.

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Vejamos o mesmo exemplo que discutimos para appendChild() com a função insertAdjacentHTML() do JavaScript.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="address">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;

addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.insertAdjacentElement('beforeend', i);
}

Neste código, usamos a opção beforeend no parâmetro para anexar o elemento de entrada criado dinamicamente no final do div address. Você pode tentar brincar com os outros atributos, como os parâmetros afterend, beforebegin e afterbegin.