Javascript Kind nach Element anhängen

73

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>
Wez
quelle
1
Zeigen Sie etwas HTML .. ist der Elternteil ein ul oder li?
Jonah Katz
Ich habe für die Wiedereröffnung dieser Qualitätssicherung gestimmt, weil ich eine neue aktualisierte Antwort hinzufügen möchte, da diese Qualitätssicherung immer noch als Top-Suchergebnis bei Google angezeigt wird.
Qwerty

Antworten:

109

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);
Yoshi
quelle
9
if-else ist nicht erforderlich: Das zweite Argument von insertBefore kann null oder undefiniert sein
Pavel
17

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);
vitalikaz
quelle
17

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:

.

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:

Meligy
quelle
1
Entschuldigen Sie meine Unwissenheit, aber wie wird dies mit Javascript umgesetzt? Können Sie mir zeigen, wie es mit meinem aktuellen Code funktioniert? Danke.
Wez
Ich denke, wenn Sie jQuery nicht dafür verwenden, dann ist Yoshis Antwort richtig. Es wird auch hier erwähnt netlobo.com/javascript-insertafter.html - Ich habe nur angenommen, dass jQuery ein Super-Standard ist. Mein Fehler: D
Meligy
1
Eineinhalb Jahre später bekomme ich eine Stimme für diese Antwort. Daher habe ich es so aktualisiert, dass es die kürzestmögliche Version der einfachen JS-Lösung und einen Link zu Mozilla-Dokumenten enthält. Es tut mir leid, dass ich es nicht früher gemacht habe (da andere es bereits mit sehr ähnlichen Implementierungen gemacht haben, dachte ich nicht, dass ich es tun müsste).
Meligy
1

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.

HBP
quelle
0

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);
}
Nathnolt
quelle
0

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

Sagar V.
quelle