web-dev-qa-db-fra.com

appendChild + createElement

Quelle est la différence entre:

var div = document.createElement('div');//output -> [object HTMLDivElement]

document.getElementById('container').appendChild(div);

et:

var div = '<div></div>';

document.getElementById('container').appendChild(div);//output -> <div></div>

Les deux ne devraient-ils pas être les mêmes? Et si non, comment puis-je utiliser la deuxième version?

javascripthtmlappendchild
17
user317005

Ce dernier est simplement une chaîne contenant du HTML tandis que le premier est un objet. Pour le premier, vous avez besoin de appendChild tandis que pour le second, vous devez ajouter à innerHTML. 

les deux ne devraient-ils pas être les mêmes? et si non, comment puis-je obtenir la deuxième version travail?

var div = '<div></div>';
document.getElementById('container').innerHTML += div;
27
Sarfraz

Avec votre moteur JS/DOM, appeler Element.appendChild avec un argument string provoque la création d'un nouveau noeud Text, puis l'ajoute.

Votre premier exemple crée un élément <div>. Votre deuxième exemple crée un nœud de texte avec <div></div> comme contenu.

Votre deuxième exemple est équivalent à:

var div = '<div></div>';

document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>

Comme Sarfraz Ahmed a mentionné dans sa réponse , vous pouvez faire en sorte que le deuxième exemple fonctionne comme vous le souhaitez en écrivant:

var div = '<div></div>';

document.getElementById('container').innerHTML = div;
8
strager

appendChild s'attend vraiment à un type HTMLDomNode, tel que HTMLDivElement, et non à une chaîne. Il ne sait pas comment gérer une chaîne. Vous pourriez faire

document.getElementById('container').innerHTML += div;

mais je préfère vraiment la première version; et je compterais plus sur lui pour se comporter de la même manière sur les navigateurs.

4
David Hedlund

appendChild attend un élément, donc lorsque vous lui envoyez du texte, il ne sait pas quoi faire. Vous voudrez peut-être envisager d'utiliser une bibliothèque javascript pour faciliter certaines tâches, telles que jQuery. Votre code serait:

$('#container').append('<div></div>');
2
Dan Heberden

La solution la plus simple et prend en charge tous les navigateurs est la suivante:

var div = '<div></div>';
var parser = new DOMParser();
var myDiv = parser.parseFromString( html, "text/xml" );

Une autre solution peut être:

var div = '<div></div>';
var tmpDiv = document.createElement('div');
    tmpDiv.innerHTML = div;

    elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element
1
Sergio

Vous pouvez également les utiliser pour ajouter/ajouter un élément au DOM, respectivement:

var elem = document.documentElement.appendChild(document.createElement(element));
var elem = document.documentElement.prepend(document.createElement(element));

et utilisez la variable elem pour cibler l'élément (par exemple):

elem.style.display = "block";
elem.style.remove();
elem.style.id = ...;

etc.

0
guest54392850