Wie man einen Childnode an eine bestimmte Position anhängt

Lesezeit: 2 Minuten

Jarco

Wie kann ich einen childNode an eine bestimmte Position in Javascript anhängen?

Ich möchte einen childNode an der 3. Position in einem div hinzufügen. Dahinter befinden sich weitere Knoten, die nach hinten verschoben werden müssen (3 wird zu 4 usw.)

Vorher einfügen

– Sime Vidas

4. Mai 2011 um 11:44 Uhr

Sie können verwenden .insertBefore():

parentElement.insertBefore(newElement, parentElement.children[2]);

Können Sie erklären, warum Sie sich entschieden haben, zu gehen? parentElement.children statt parentElement.childNodes? Ersteres listet nur Kinder auf, die es sind Elements, wodurch Knoten ignoriert werden, die sind Texts, zum Beispiel… Wäre es nicht besser anzunehmen, dass die untergeordneten Knoten alle Arten von Knoten enthalten können???

– Mike Nagetier

12. Oktober 2017 um 11:26 Uhr
@mikerodent Zum Beispiel, wenn Sie mit Listenelementen arbeiten <li> in einer geordneten Liste <ol>möchten Sie nicht, dass der Leerraumeinzug als untergeordnetes Element zählt (vorausgesetzt, das HTML-Dokument ist hübsch).

– Yeti

5. Februar 2019 um 12:21 Uhr
Die Verwendung von childNodes über children ist hier der richtige Weg.

– Brainki

30. Oktober 2019 um 18:37 Uhr

Mauricio Juanes

Dafür haben Sie 3 Optionen .insertBefore(), .insertAdjacentElement() oder .insertAdjacentHtml()

.insertBefore()

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

in deinem Fall könntest du da auf Felix Kling antworten

var insertedElement = parentElement.insertBefore(newElement, parentElement.children[2]);

.insertAdjacentElement()

referenceElement.insertAdjacentElement (where, newElement);

in deinem Fall wäre es das

parentElement.children[1].insertAdjacentElement("afterEnd", newElement);

.insertAdjacentHTML()

referenceElement.insertAdjacentElement (where, newElementHTML);

in deinem Fall wäre es das

parentElement.children[1].insertAdjacentElement("afterEnd", "<td>newElementHTML</td>");

Leonhard Pauli

Zum Einfügen eines untergeordneten Knotens an einem bestimmten Index

Vereinfacht,

Element.prototype.insertChildAtIndex = function(child, index) {
  if (!index) index = 0
  if (index >= this.children.length) {
    this.appendChild(child)
  } else {
    this.insertBefore(child, this.children[index])
  }
}

Dann,

var child = document.createElement('div')
var parent = document.body
parent.insertChildAtIndex(child, 2)

Tada!

Seien Sie sich bewusst, wann das Erweitern von Natives problematisch sein könnte

Warum eine Warnung geben, anstatt nur eine generische Funktion zu schreiben, die mit dem übergeordneten Knoten aufgerufen werden kann?

– jonschlinkert

15. Juni 2019 um 18:36 Uhr
Habe zu dieser Zeit wahrscheinlich hauptsächlich Vanilla Js mit wenig bis gar keinen Abhängigkeiten geschrieben, was Erweiterungen nett macht. Bei den heutigen Bundlern und Modulsystemen wäre ein Utility-Paket mit einer solchen Funktion wahrscheinlich vorzuziehen.

– Leonhard Pauli

17. Juni 2019 um 22:10 Uhr

12153900cookie-checkWie man einen Childnode an eine bestimmte Position anhängt

#dom #Eltern-Kind #Javascript