Ich möchte ein li-Element nach einem anderen li in einem ul-Element mit Javascript anhängen. Dies ist der Code, den ich bisher habe.

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

Ich kenne appendChild,

parentGuest.appendChild(childGuest);

Dies hängt jedoch das neue Element in das andere ein und nicht danach. Wie kann ich das neue Element nach dem vorhandenen anhängen? Vielen Dank.

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

Sie können verwenden:

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

Aber wie Pavel betonte, kann das referenceElement null / undefiniert sein, und wenn ja, verhält sich insertBefore genau wie appendChild . Folgendes entspricht also dem oben Gesagten:

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

Sie müssen das neue Element vor dem nächsten Geschwister des Elements an das übergeordnete Element des vorhandenen Elements anhängen. Mögen:

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

Oder wenn Sie es einfach anhängen möchten, dann:

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

Wenn Sie nach einer einfachen JS-Lösung suchen, verwenden Sie nur insertBefore()gegen nextSibling.

Etwas wie:

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

Beachten Sie, dass der Standardwert von nextSiblingist null, sodass Sie dafür nichts Besonderes tun müssen.

Update: Sie müssen nicht einmal das ifVorhandensein einer Überprüfung überprüfen, parentGuest.nextSiblingwie dies bei der aktuell akzeptierten Antwort der Fall ist, denn wenn es kein nächstes Geschwister gibt, wird es zurückkehren nullund nullzum zweiten Argument der insertBefore()Mittel übergehen: am Ende anhängen.

Referenz:

• nextSibling
• insertBefore

.

Wenn Sie jQuery verwenden (ansonsten ignorieren, ich habe oben eine einfache JS-Antwort angegeben), können Sie die bequeme after()Methode nutzen:

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

Referenz:

• jQuery after ()

Das reicht aus:

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

Wenn der refnode(zweite Parameter) null ist, wird ein reguläres appendChild ausgeführt. siehe hier: http://reference.sitepoint.com/javascript/Node/insertBefore

Eigentlich bezweifle ich, dass das || nullerforderlich ist, probiere es aus und schau.

Sie könnten auch tun

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

oder

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

after ist jetzt eine JavaScript-Methode

MDN-Dokumentation

MDN zitieren

Die ChildNode.after()Methode fügt unmittelbar danach eine Reihe von Knoten oder DOMStringObjekten in die untergeordnete Liste des ChildNodeübergeordneten Elements ein ChildNode. DOMString-Objekte werden als äquivalente Textknoten eingefügt.

Die Browserunterstützung ist Chrome (54+), Firefox (49+) und Opera (39+). IE und Edge werden nicht unterstützt.

Snippet

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>

Im Snippet verwendete ich einen anderen Begriff append zu