Ce dernier ( appendChild ) fait no provoquer une reconstruction complète du DOM, voire de tous les éléments/nœuds de la cible.
La première (fixation innerHTML ) entraîne une reconstruction complète du contenu de l'élément cible, ce qui n'est pas nécessaire dans le cas d'un ajout.
Ajout par innerHTML += content permet au navigateur de parcourir tous les nœuds de l'élément pour construire une chaîne HTML à transmettre à la couche JavaScript. Votre code ajoute ensuite du texte à cette chaîne et définit le paramètre innerHTML Le navigateur abandonne alors tous les anciens nœuds de la cible, réanalysant tout le HTML et créant de nouveaux nœuds. Donc, dans ce sens, cela peut ne pas être efficace. (Cependant, l'analyse du HTML est ce que font les navigateurs et ils sont vraiment, vraiment rapides à le faire).
Réglage de innerHTML invalide en effet toutes les références à des éléments de l'élément cible que vous détenez -- parce que ces éléments n'existent plus, vous les avez supprimés et en avez mis de nouveaux (qui ressemblent beaucoup) lorsque vous avez activé la commande innerHTML .
En bref, si vous êtes ajout de j'utiliserais appendChild (ou insertAdjacentHTML (voir ci-dessous). Si vous remplacez, il y a des situations très valables où l'utilisation de l'option innerHTML est une meilleure option que de créer soi-même l'arbre via l'API DOM (la rapidité étant la principale).
Enfin, il convient de mentionner insertAdjacentHTML Il s'agit d'une fonction que vous pouvez utiliser pour insérer des nœuds et des éléments dans ou à côté d'un élément à l'aide d'une chaîne HTML. Elle permet également d'ajouter des éléments à un élément : theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); Le premier argument est l'endroit où placer le HTML ; vos choix sont les suivants "beforebegin" (en dehors de l'élément, juste devant), "afterbegin" (à l'intérieur de l'élément, au début), "beforeend" (à l'intérieur de l'élément, à la fin), et "afterend" (en dehors de l'élément, juste après celui-ci). Notez que "afterbegin" y "beforeend" dans l'élément lui-même, alors que "beforebegin" y "afterend" dans l'élément parent . Supporté par tous les principaux navigateurs de bureau, je n'ai aucune idée de la qualité du support mobile (bien que je sois sûr que iOS Safari et Android 2.x et plus l'ont, au moins), mais la cale est minuscule.
