JavaScript anexar dados ao Div

1. Use innerHTML para anexar dados a div em JavaScript
2. Use appendChild para anexar dados a div em JavaScript
3. Use insertAdjacentHTML() para anexar dados a div em JavaScript
4. Use o append() do jQuery para acrescentar dados ao Div

Este tutorial apresenta como anexar dados a div usando JavaScript.

Use innerHTML para anexar dados a div em JavaScript

Neste método, primeiro selecionamos o div usando um dos seletores, ou seja, getElementById, getElementByTag, querySelector, etc. Em seguida, anexamos os dados ao atributo innerHTML de div. Este método tem uma desvantagem: ele remove todos os ouvintes de eventos existentes no div selecionado. Ele também irá destruir todos os nós contidos dentro e substituí-los por novos. Todas as referências aos elementos serão perdidas.

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

Use appendChild para anexar dados a div em JavaScript

Como no método anterior, primeiro selecionamos o div usando um dos seletores. Mas em vez de innerHTML, usamos appendChild por causa dos problemas discutidos no método anterior. Antes de anexar um filho, temos que criar o nó de texto.

var targetDiv = document.getElementById('ID');
var content = document.createTextNode('data that you want to add');
targetDiv.appendChild(content);

Use insertAdjacentHTML() para anexar dados a div em JavaScript

Como o segundo método, este método é uma alternativa melhor ao primeiro método. insertAdjacentHTML() não analisa novamente o elemento e também não interfere com os elementos existentes dentro dele. É muito mais rápido do que innerHTML. Também nos ajuda a especificar a posição na qual inserir os dados. Como os métodos anteriores, primeiro selecionamos div e, em seguida, usamos insertAdjacentHTML() para adicionar os dados na posição necessária.

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

Use o append() do jQuery para acrescentar dados ao Div

A função append leva a entrada do conteúdo que precisa ser adicionado e pode ser chamada diretamente em uma tag usando a sintaxe jQuery. Este método também tem todas as desvantagens do método innerHTML.

$('.divd').append('<p>Test</p>');