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>
Ne devrait pas être à la même? Et si non, comment puis-je obtenir la deuxième version de travail?
source d'informationauteur
Vous devez vous connecter pour publier un commentaire.
Le plus tard est du pur html, un élément alors que la première est l'objet. Pour la première, vous avez besoin
appendChild
alors que pour la plus tard, vous avez besoininnerHTML
.Avec votre JS/DOM moteur, appelant
Element.appendChild
avec unstring
comme un argument provoque une nouvelleText
nœud d'être créé alors ajouté.Votre premier exemple crée un
<div>
élément. Votre deuxième exemple crée un nœud de texte avec<div></div>
que son contenu.Votre deuxième exemple est équivalent à:
Comme Sarfraz Ahmed mentionné dans sa réponsevous pouvez faire le deuxième exemple de travail, comment vous voulez qu'il fonctionne en écrivant:
appendChild
vraiment s'attendre à un HTMLDomNode d'une certaine sorte, comme unHTMLDivElement
et non une chaîne. Il ne sait pas comment traiter avec un string. Vous pourriez fairemais je préfère vraiment la version de la première; et je serais davantage compter sur elle pour se comporter de la même manière sur tous les navigateurs.
appendChild s'attend à un élément lorsque vous envoyez ce texte, il ne sait pas quoi faire. Vous voudrez peut-être regarder dans l'aide d'une bibliothèque javascript pour soulager une partie de ce travail, telles que jQuery. Votre code serait:
La solution la plus simple et de soutenir tous les navigateurs est:
Une autre solution peut être:
Vous pouvez également les utiliser pour ajouter/ajouter un élément du DOM respectivement:
et l'utilisation de la
elem
variable cible de l'élément (e.g):etc.