JavaScript anexar datos a Div

1. Utilice innerHTML para agregar datos a div en JavaScript
2. Utilice appendChild para agregar datos a div en JavaScript
3. Utilice insertAdherentHTML() para agregar datos a div en JavaScript
4. Utilice append() de jQuery para agregar datos a Div

Este tutorial presenta cómo agregar datos a div usando JavaScript.

Utilice innerHTML para agregar datos a div en JavaScript

En este método, primero seleccionamos el div usando uno de los selectores, es decir, getElementById, getElementByTag, querySelector, etc. Luego agregamos los datos al atributo innerHTML de div. Este método tiene una desventaja: elimina todos los detectores de eventos existentes en el div seleccionado. También destruirá todos los nodos contenidos en el interior y los reemplazará por otros nuevos. Se perderán todas las referencias a los elementos.

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

Utilice appendChild para agregar datos a div en JavaScript

Como en el método anterior, primero seleccionamos el div usando uno de los selectores. Pero en lugar de innerHTML, usamos appendChild debido a los problemas discutidos en el método anterior. Antes de agregar un niño, tenemos que crear el nodo de texto.

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

Utilice insertAdherentHTML() para agregar datos a div en JavaScript

Como el segundo método, este método es una mejor alternativa al primer método. InsertAdjectedHTML() no analiza el elemento y tampoco interfiere con los elementos existentes en su interior. Es mucho más rápido que innerHTML. También nos ayuda a especificar la posición en la que insertar los datos. Como los métodos anteriores, primero seleccionamos div, y luego usamos insertAdherentHTML() para agregar los datos en la posición requerida.

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

Utilice append() de jQuery para agregar datos a Div

La función de agregar toma la entrada del contenido que debe agregarse y se puede llamar directamente en una etiqueta usando la sintaxis de jQuery. Este método también tiene todos los inconvenientes del método innerHTML.

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