Nous savons que appendChild et insertBefore ont tous deux pour fonction d'insérer des nœuds. Mais dans l’application, il existe encore quelques différences entre les deux.
Par exemple, lorsque l’on souhaite insérer un nœud enfant P dans le div suivant :
<div id="test"><p id="x1">Nœud</p><p>Nœud</p></div>
Nous pouvons écrire comme ceci (veuillez ajouter un autre commentaire lorsque vous testez une certaine situation) :
Copiez le code comme suit :
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "Ceci est un test";
//Les tests commencent ici
//Méthode appendChild :
oTest.appendChild(newNode);
//Méthode insertBefore :
oTest.insertBefore(newNode,null);
</script>
Grâce au code ci-dessus, vous pouvez tester qu'un nouveau nœud est créé sous le nœud div, et ce nœud est le dernier nœud du div. (Pour afficher le DOM, IE peut le visualiser via le plug-in IE Developer Toolbar et Firefox peut utiliser Firebug)
Évidemment, grâce à cet exemple, nous pouvons savoir que appendChildhild et insertBefore peuvent insérer des nœuds.
Dans l'exemple ci-dessus, il existe un tel code : oTest.insertBefore(newNode,null). Ici, insertBefore a deux paramètres qui peuvent être définis. Le premier est le même que appendChild, mais le second lui est unique. Non seulement il peut être nul, mais il peut aussi être :
Copiez le code comme suit :
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "Ceci est un test";
oTest.insertBefore(newNode,refChild);
</script>
Cet exemple insérera un nouveau nœud devant le nœud x1
Ou:
Copiez le code comme suit :
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "Ceci est un test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
Cet exemple insérera un nouveau nœud avant le prochain nœud du nœud x1
Également disponible pour :
Copiez le code comme suit :
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "Ceci est un test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
Cet exemple insérera un nouveau nœud devant le premier nœud enfant. Vous pouvez également insérer de nouveaux nœuds à d'autres emplacements en modifiant childNodes[0,1,...]
Puisqu'on peut voir que la méthode insertBefore() consiste à insérer un nouveau nœud devant le nœud enfant existant, mais dans l'exemple 1, la méthode insertBefore() peut également être utilisée pour insérer un nouveau nœud à la fin du nœud enfant. liste de nœuds. En combinant les deux situations, on constate que la méthode insertBefore() peut insérer un nœud à n'importe quelle position dans la liste des nœuds enfants.
À partir de ces exemples :
La méthode appendChild() ajoute un nouveau nœud enfant à la fin de la liste des nœuds enfants d'un nœud.
La méthode insertBefore() insère un nouveau nœud à n'importe quelle position dans la liste des nœuds enfants du nœud.