web-dev-qa-db-fra.com

Javascript Append Child AFTER Element

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 dans l’autre, et non après. Comment puis-je ajouter le nouvel élément après celui existant? Merci.

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

Vous pouvez utiliser:

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

Mais comme Pavel l'a fait remarquer, le referenceElement peut être null/indéfini, 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);
100
Yoshi

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);
15
vitalikaz

Si vous recherchez une solution JS simple, il vous suffit d'utiliser insertBefore() contre nextSibling.

Quelque chose comme:

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

Notez que la valeur par défaut de nextSibling est null, vous n'avez donc rien à faire de spécial pour cela.

Update: Vous n'avez même pas besoin de la variable if pour vérifier la présence de parentGuest.nextSibling comme le fait actuellement la réponse acceptée, car s'il n'y a pas de frère ou de soeur proche, elle retournera null et le passage de null au deuxième argument de insertBefore() signifie: la fin.

Référence:

.

SI vous utilisez jQuery (ignorez le contraire, j’ai énoncé clairement la réponse JS ci-dessus), vous pouvez utiliser la méthode pratique after():

$("#one").after("<li id='two'>");

Référence:

14
Meligy

Cela suffit:

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

puisque si la variable refnode (second paramètre) est nulle, un appendChild standard est exécuté. voir ici: http://reference.sitepoint.com/javascript/Node/insertBefore

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

1
HBP

Tu pourrais aussi faire

function insertAfter(node1, node2) {
    node1.outerHTML += node2.outerHTML;
}

ou

function insertAfter2(node1, node2) {
    var wrap = document.createElement("div");
    wrap.appendChild(node2.cloneNode(true));
    var node2Html = wrap.innerHTML;
    node1.insertAdjacentHTML('afterend', node2Html);
}
0
nathnolt

after est maintenant une méthode JavaScript

Documentation MDN

Citant MDN

La méthode ChildNode.after() insère un ensemble d'objets Node ou DOMString dans la liste des enfants du parent de cette ChildNode, juste après cette ChildNode. Les objets DOMString sont insérés en tant que nœuds de texte équivalents.

Le navigateur est pris en charge par Chrome (54 ans et plus), Firefox (49 ans et plus) et Opera (39 ans et plus). Il ne supporte pas IE et Edge.

Fragment

var Elm=document.getElementById('div1');
var Elm1 = document.createElement('p');
var Elm2 = Elm1.cloneNode();
Elm.append(Elm1,Elm2);

//added 2 paragraphs
Elm1.after("This is sample text");
//added a text content
Elm1.after(document.createElement("span"));
//added an element
console.log(Elm.innerHTML);
<div id="div1"></div>

Dans l'extrait de code, j'ai utilisé un autre terme append aussi

0
Sagar V