Ajouter du contenu HTML à l'élément HTML existant à l'aide de JavaScript

1. Inconvénient de l’utilisation de InnerHTML pour ajouter un nouveau nœud HTML
2. Ajouter du contenu HTML sans remplacer les éléments DOM
3. Utilisation de appendChild() pour ajouter du contenu HTML en JavaScript
4. Utilisation de insertAdjacentHTML() pour ajouter un nœud HTML

L’ajout de contenu HTML à un div ou à un autre élément HTML avec javascript est facile. Nous pouvons définir la propriété HTMLElement.innerHTML de l’élément avec le nouveau contenu HTML. Mais au cours du processus, il effacera tous les attributs dynamiques qui lui sont ajoutés.

Inconvénient de l’utilisation de InnerHTML pour ajouter un nouveau nœud HTML

• Le HTMLElement.innerHTML fonctionne en supprimant le contenu HTML à l’intérieur de l’élément, puis en le rajoutant avec le nouveau morceau de HTML inclus. Essentiellement, il remplace le contenu HTML plutôt que d’en ajouter simplement un nouveau.
• Lorsque nous ajoutons un nouvel élément HTML au DOM avec la propriété innerHTML, il supprimera également tous les nœuds descendants, puis les remplacera par les nouveaux nœuds construits en analysant le nouveau contenu HTML (la chaîne HTML affectée à innerHTML) et restituer l’intégralité du code HTML.
• On sait peu qu’en utilisant innerHTML dans un projet qui subit une revue de cybersécurité, le code peut être rejeté. Il est conseillé de ne pas utiliser directement innerHTML car cela peut présenter un risque potentiel de sécurité (pour plus de détails, reportez-vous au lien MDN).

Ajouter du contenu HTML sans remplacer les éléments DOM

Pour ajouter un morceau de code HTML à notre DOM existant, nous pouvons utiliser les fonctions intégrées suivantes de javascript sans craindre de perdre le contenu dynamique déjà associé à celles-ci.

• appendChild()
• insertAdjacentHTML()

Utilisation de appendChild() pour ajouter du contenu HTML en JavaScript

appendChild() sert le même objectif que celui de innerHTML. Nous pouvons utiliser ces deux méthodes pour ajouter du contenu HTML à un nœud. La différence entre les deux approches est que appendChild() est une fonction, alors que innerHTML est une propriété. appendChild() ajoutera un nœud à l’élément DOM existant au lieu de remplacer le contenu du DOM comme le fait la propriété 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);
}

Nous avons créé un formulaire pour saisir le name et address de l’utilisateur à l’aide du code ci-dessus. L’adresse a généralement plus d’une ligne. Par conséquent, nous avons créé un bouton qui ajoute de nouveaux champs de saisie lorsque vous cliquez dessus pour capturer ces lignes d’adresse supplémentaires. Voici le processus suivi pour créer un nouveau champ de saisie.

1. Nous appelons la fonction addAddressLine sur l’événement click du bouton Add Address Line.
2. Dans la fonction, nous créons du HTML input dynamiquement avec la fonction document.createElement('input'). Il renvoie l’élément input créé qui est stocké dans la variable i.
3. Ensuite, nous définissons les attributs type et placeholder sur la variable input créée avec la méthode setAttribute().
4. Nous avons l’élément input prêt à être ajouté à la structure div existante. Par conséquent, nous recherchons l’adresse div à l’aide du docuemnt.getElementById() qui renvoie la structure div dans son ensemble, puis nous utilisons la fonction appendChild(i) de JavaScript.
5. La fonction appendChild(i) ajoute l’élément input créé dynamiquement détenu par la variable i et le place à la fin de la address div. Nous utilisons le lineCount pour incrémenter la valeur de l’espace réservé à chaque fois que nous ajoutons un nouveau champ de saisie.

Noter

• Nous pouvons également utiliser la nouvelle méthode append() pour ajouter l’élément créé au DOM. La méthode javascript append() nous permet d’utiliser DOMString (textes de chaîne simple) comme argument et ne retourne aucune valeur. Attention, le navigateur Internet Explorer ne prend pas en charge la nouvelle méthode append().
• Tous les navigateurs Web modernes, y compris Internet Explorer, prennent en charge l’ancienne fonction appendChild().

Utilisation de insertAdjacentHTML() pour ajouter un nœud HTML

Les fonctions appendChild() et même append() sont capables d’ajouter de nouveaux éléments au nœud HTML donné. Ces deux méthodes insèrent l’élément après le dernier enfant. Cela peut ne pas être utile pour tous les scénarios. Surtout si nous souhaitons ajouter le nœud HTML à une position spécifiée dans la structure HTML. Pour de tels cas, la fonction insertAdjacentHTML() peut être utilisée. Il faut quelques paramètres, la position et le texte dans cette position.

• Position : insertAdjacentHTML prend en charge quatre valeurs dans le paramètre de position.

  • beforebegin : Pour insérer le nœud HTML avant le début de l’élément.
  • afterbegin : Comme son nom l’indique, cette option insère l’élément juste après la balise d’ouverture du nœud sélectionné et le place avant le premier enfant.
  • beforeend : celui-ci est similaire au appendChild(). Comme son nom l’indique, la position beforeend place l’élément juste après le dernier enfant.
  • afterend : fait référence à la position après la fermeture de la balise de nœud HTML cible.

• String : On peut insérer le HTML au format chaîne en second paramètre. Par exemple : <div> Hello World!</div>.

En un coup d’œil, la représentation est la suivante.

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

Regardons le même exemple que nous avons discuté pour appendChild() avec la fonction insertAdjacentHTML() de 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);
}

Dans ce code, nous avons utilisé l’option beforeend dans le paramètre pour ajouter l’élément d’entrée créé dynamiquement à la fin de la div address. Vous pouvez essayer de jouer avec les autres attributs comme les paramètres afterend, beforebegin et afterbegin.