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>
Antworten:
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:
quelle
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);
quelle
Wenn Sie nach einer einfachen JS-Lösung suchen, verwenden Sie nur
insertBefore()
gegennextSibling
.Etwas wie:
Beachten Sie, dass der Standardwert von
nextSibling
istnull
, sodass Sie dafür nichts Besonderes tun müssen.Update: Sie müssen nicht einmal das
if
Vorhandensein einer Überprüfung überprüfen,parentGuest.nextSibling
wie dies bei der aktuell akzeptierten Antwort der Fall ist, denn wenn es kein nächstes Geschwister gibt, wird es zurückkehrennull
undnull
zum zweiten Argument derinsertBefore()
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:
quelle
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/insertBeforeEigentlich bezweifle ich, dass das
|| null
erforderlich ist, probiere es aus und schau.quelle
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); }
quelle
after ist jetzt eine JavaScript-Methode
MDN-Dokumentation
MDN zitieren
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
quelle