Cette méthode de "copier" éléments HTML à partir d'un endroit à l'autre est le résultat d'une mauvaise compréhension de ce qu'est un navigateur. Les navigateurs ne pas conserver un document HTML en mémoire quelque part à plusieurs reprises de modifier le code HTML basés sur des commandes à partir de JavaScript.
Lorsqu'un navigateur charge une page, il analyse le document HTML et le transforme en un DOM structure. C'est une relation des objets suivant un standard du W3C (enfin, la plupart du temps...). Le HTML d'origine est à partir de là complètement redondant. Le navigateur ne prend pas soin de ce que l'original de la structure HTML a été; sa conception de la page web est le DOM de la structure qui a été créée à partir d'elle. Si votre balisage HTML est incorrect/non valide, il sera corrigé dans une certaine mesure par le navigateur web; les DOM structure ne contiennent pas le code non valide en quelque sorte.
Fondamentalement, HTML doit être considérée comme un moyen de serialising un DOM structure à être passé au-dessus de l'internet ou stockés dans un fichier local.
Il ne devrait pas, par conséquent, être utilisée pour la modification d'une page web existante. Le DOM (Document Object Model) est un système permettant de modifier le contenu d'une page. Ceci est basé sur la relation de nœuds, pas sur le HTML de la sérialisation. Ainsi, lorsque vous ajoutez un li d'un ul, vous disposez de ces deux options (en supposant ul est l'élément de la liste):
// option 1: innerHTML
ul.innerHTML += '<li>foobar</li>';
// option 2: DOM manipulation
var li = document.createElement('li');
li.appendChild(document.createTextNode('foobar'));
ul.appendChild(li);
Maintenant, la première option semble beaucoup plus simple, mais c'est seulement parce que le navigateur dispose d'une abstraction de beaucoup loin pour vous: en interne, le navigateur a convertir les enfants de l'élément d'une chaîne de caractères, puis ajouter un peu de contenu, puis de convertir la chaîne vers un DOM structure. La deuxième option correspond au navigateur natif de la compréhension de ce qui se passe.
La seconde considération importante est de réfléchir sur les limites du langage HTML. Quand vous pensez à une page web, pas tout ce qui est pertinent pour l'élément peut être sérialisé pour HTML. Par exemple, les gestionnaires d'événements liés avec x.onclick = function(); ou x.addEventListener(...) ne sera pas reproduit dans d' innerHTML, de sorte qu'ils ne soient pas copiés partout. Ainsi, les nouveaux éléments en y de ne pas avoir les écouteurs d'événement. Ce n'est probablement pas ce que vous voulez.
Donc, la façon de contourner cela est de travailler avec les natifs de DOM méthodes:
for (var i = 0; i < x.childNodes.length; i++) {
y.appendChild(x.childNodes[i].cloneNode(true));
}
La lecture du MDN documentation sera probablement aider à comprendre cette façon de faire les choses:
Maintenant, le problème avec ce (comme avec l'option 2 dans l'exemple de code ci-dessus), c'est qu'il est très détaillé, bien plus que l' innerHTML option serait. C'est lorsque l'on apprécie d'avoir une bibliothèque JavaScript qui fait ce genre de chose pour vous. Par exemple, en jQuery:
$('#y').html($('#x').clone(true, true).contents());
C'est beaucoup plus explicite sur ce que vous voulez arriver. Ainsi que d'avoir divers avantages de performance et de préservation des gestionnaires d'événements, par exemple, il vous aide également à comprendre ce que votre code est en train de faire. Ce qui est bon pour votre âme comme un programmeur JavaScript et fait bizarre d'erreurs significativement moins de chances!
