Javascript Ajouter un élément AFTER enfant

Question

Je voudrais ajouter un élément li après un autre li à l'intérieur d'un élément ul en utilisant javascript, c'est le code que j'ai jusqu'à présent ..

 var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";

Je connais appendChild,

 parentGuest.appendChild(childGuest);

Cependant, cela ajoute le nouvel élément à l'intérieur de l'autre, et non après. Comment puis-je ajouter le nouvel élément après l'existant ? Merci.

 <ul>
  <li id="one"><!-- where the new li is being put --></li>
  <!-- where I want the new li -->
</ul>

Answer 1

Vous pouvez utiliser:

 if (parentGuest.nextSibling) {
  parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
}
else {
  parentGuest.parentNode.appendChild(childGuest);
}

---

Mais comme Pavel l'a souligné, le referenceElement peut être null/undefined, et si c'est le cas, insertBefore se comporte exactement comme appendChild . Donc ce qui suit est équivalent à ce qui précède :

 parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Answer 2

Vous devez ajouter le nouvel élément au parent de l'élément existant avant le prochain frère de l'élément. Comme:

 var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Ou si vous voulez simplement l'ajouter, alors :

 var parentGuest = document.getElementById("one"); 
var childGuest = document.createElement("li"); 
childGuest.id = "two"; 
parentGuest.parentNode.appendChild(childGuest);

Answer 3

Cela suffit :

  parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling || null);

puisque si le refnode (deuxième paramètre) est nul, un appendChild régulier est effectué. voir ici : http://reference.sitepoint.com/javascript/Node/insertBefore

En fait, je doute que le || null soit requis, essayez-le et voyez.