JavaScript anexar dados ao Div
-
Use
innerHTML
para anexar dados a div em JavaScript -
Use
appendChild
para anexar dados a div em JavaScript -
Use
insertAdjacentHTML()
para anexar dados a div em JavaScript -
Use o
append()
do jQuery para acrescentar dados ao Div
![JavaScript anexar dados ao Div](/img/JavaScript/feature-image---javascript-append-data-to-div.webp)
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>');
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn