JavaScript ajoute des données à la div

1. Utilisez innerHTML pour ajouter des données à div en JavaScript
2. Utilisez appendChild pour ajouter des données à div en JavaScript
3. Utilisez insertAdjacentHTML() pour ajouter des données à div en JavaScript
4. Utilisez append() de jQuery pour ajouter des données à la div

Ce didacticiel présente comment ajouter des données à div à l’aide de JavaScript.

Utilisez innerHTML pour ajouter des données à div en JavaScript

Dans cette méthode, nous sélectionnons d’abord le div en utilisant l’un des sélecteurs, c’est-à-dire getElementById, getElementByTag, querySelector, etc. Nous ajoutons ensuite les données à l’attribut innerHTML de div. Cette méthode a un inconvénient : elle supprime tous les écouteurs d’événements existants sur le div sélectionné. Il détruira également tous les nœuds contenus à l’intérieur et les remplacera par de nouveaux. Toutes les références aux éléments seront perdues.

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

Utilisez appendChild pour ajouter des données à div en JavaScript

Comme la méthode précédente, on sélectionne d’abord le div en utilisant l’un des sélecteurs. Mais au lieu de innerHTML, nous utilisons appendChild à cause des problèmes abordés dans la méthode précédente. Avant d’ajouter un enfant, nous devons créer le nœud de texte.

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

Utilisez insertAdjacentHTML() pour ajouter des données à div en JavaScript

Comme la deuxième méthode, cette méthode est une meilleure alternative à la première méthode. insertAdjacentHTML() n’analyse pas l’élément et n’interfère pas non plus avec les éléments existants à l’intérieur. C’est beaucoup plus rapide que innerHTML. Cela nous aide également à spécifier la position à laquelle insérer les données. Comme les méthodes précédentes, nous sélectionnons d’abord le div, puis nous utilisons insertAdjacentHTML() pour ajouter les données à la position requise.

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

Utilisez append() de jQuery pour ajouter des données à la div

La fonction d’ajout prend en entrée le contenu à ajouter et peut être appelée directement sur une balise à l’aide de la syntaxe jQuery. Cette méthode présente également tous les inconvénients de la méthode innerHTML.

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