it-swarm.com.de

Javascript Kind nach Element anhängen

Ich möchte ein li-Element nach einem anderen li in einem ul-Element mit Javascript anhängen.

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

Ich bin mit appendChild vertraut,

parentGuest.appendChild(childGuest);

Das neue Element wird jedoch an das andere Element angehängt und nicht danach. Wie kann ich das neue Element an das vorhandene anhängen? Vielen Dank.

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

Sie können verwenden:

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

Wie Pavel jedoch hervorgehoben hat, kann das referenceElement null/undefined sein, und falls dies zutrifft, verhält sich insertBefore genauso wie appendChild . Daher ist das Folgende dem obigen gleichwertig:

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

Sie müssen das neue Element an das übergeordnete Element des vorhandenen Elements anhängen, bevor das nächste Element des Elements das nächste Element ist. 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);
15
vitalikaz

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

So etwas wie:

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

Beachten Sie, dass der Standardwert von nextSiblingnull ist. Sie müssen also nichts Besonderes dafür tun.

Update: Sie brauchen nicht einmal die Variable if, die das Vorhandensein von parentGuest.nextSibling überprüft, wie es die derzeit akzeptierte Antwort tut. Wenn es kein nächstes Geschwister gibt, wird null zurückgegeben und null an das zweite Argument von insertBefore() übergeben das Ende.

Referenz:

.

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

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

Referenz:

14
Meligy

Das reicht aus:

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

da die Variable refnode (zweiter Parameter) null ist, wird eine reguläre appendChild ausgeführt. siehe hier: http://reference.sitepoint.com/javascript/Node/insertBefore

Eigentlich bezweifle ich, dass der || null erforderlich ist, probieren Sie es aus und sehen Sie.

1
HBP

Du könntest es 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);
}
0
nathnolt

after ist jetzt eine JavaScript-Methode

MDN-Dokumentation

Zitieren MDN

Die ChildNode.after()-Methode fügt eine Gruppe von Node- oder DOMString-Objekten in die untergeordnete Liste des übergeordneten Elements dieser ChildNode ein, unmittelbar nach dieser ChildNode. DOMString-Objekte werden als äquivalente Textknoten eingefügt.

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

Ausschnitt

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 habe ich einen anderen Begriff append verwendet

0
Sagar V