Wie fügt man ein Element nach einem anderen Element in JavaScript ein, ohne eine Bibliothek zu verwenden?

Question

Es gibt insertBefore() in JavaScript, aber wie kann ich ein Element einfügen nach ein anderes Element, ohne jQuery oder eine andere Bibliothek zu verwenden?

Answer 1

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Wo referenceNode ist der Knoten, den Sie in newNode nach. Wenn referenceNode das letzte Kind innerhalb seines Elternelements ist, ist das in Ordnung, denn referenceNode.nextSibling wird sein null y insertBefore behandelt diesen Fall durch Hinzufügen am Ende der Liste.

Also:

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

---

Sie können es mit dem folgenden Ausschnitt testen:

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>

Answer 2

Obwohl einfügenVor() ist großartig und wird in den meisten Antworten hier erwähnt. Für zusätzliche Flexibilität und um ein wenig deutlicher zu sein, können Sie verwenden:

Le site insertAdjacentElement() como refElem.insertAdjacentElement(position, newElem) können Sie auf ein beliebiges Element verweisen und das zu verschiebende Element genau an der gewünschten Stelle einfügen (die Position kann eine der folgenden sein: 'beforebegin' , 'afterbegin' , 'beforeend' , 'afterend' ) wie unten dargestellt:

// refElem.insertAdjacentElement('beforebegin', myElem); 
<p id="refElem">
    // refElem.insertAdjacentElement('afterbegin', myElem);
    ... content ...
    // refElem.insertAdjacentElement('beforeend', myElem);
</p>
// refElem.insertAdjacentElement('afterend', myElem); 

Andere, die für ähnliche Anwendungsfälle in Frage kommen: insertAdjacentHTML() y insertAdjacentText()

Referenzen:

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

Answer 3

Einfaches JavaScript wäre das Folgende:

Anhängen vor:

element.parentNode.insertBefore(newElement, element);

Anhängen nach:

element.parentNode.insertBefore(newElement, element.nextSibling);

---

Aber werfen Sie einige Prototypen ein, um die Nutzung zu vereinfachen

Wenn Sie die folgenden Prototypen erstellen, können Sie diese Funktionen direkt aus neu erstellten Elementen aufrufen.

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBefore(element) Prototyp

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter(element) Prototyp

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

---

Und um das Ganze in Aktion zu sehen, führen Sie den folgenden Codeschnipsel aus

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function(element) {
  element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;

/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';

/* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor2'));

div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}

<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

Führen Sie es auf JSFiddle aus

Answer 4

Lösung 2018 (Schlechte Praxis, gehen Sie zu 2020)

Ich weiß, dass diese Frage uralt ist, aber für alle zukünftigen Benutzer, hier ist ein modifizierter Prototyp. Dies ist nur ein Polyfill für die Funktion .insertAfter, die nicht existiert. Dieser Prototyp fügt direkt die Funktion HTMLElement.insertAfter(element); zum HTMLElement-Prototyp:

// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Custom Method
Element.prototype.insertAfter = function(new) {
    this.parentNode.insertBefore(new, this.nextSibling);
}

// Insert Before Element
el.insertBefore(newEl)

// Insert After Element
el.insertAfter(newEl);

// Just remember you cant use .insertAfter() or .insertBefore() 
// after either is already called.
// You cant place one element in two places at once.

---

2019 Lösung (Hässlich / Veraltet, gehen Sie zu 2020)

Verwenden Sie keine Prototypen (wie die Lösung 2018). Das Überschreiben des Prototyps ist sowohl gefährlich als auch von geringer Qualität. Wenn Sie eine neue Methode wünschen, verwenden Sie stattdessen Funktionsüberschreibungen.
Wenn Sie eine sichere Funktion für kommerzielle Projekte wünschen, verwenden Sie einfach eine Standardfunktion. Sie ist nicht so schön, aber sie funktioniert:

// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Function You Need
function insertAfter(el0, el1) {
    el0.parentNode.insertBefore(el1, el0.nextSibling);
}

// Insert Before Element
el.insertBefore(newEl);

// Insert After Element
insertAfter(el, newEl);

// Just remember you cant use insertAfter() or .insertBefore()
// after either is already called.
// You cant place one element in two places at once.

---

2020 Lösung - ChildNode

Aktuelle Webstandards für ChildNode: MDN Docs - ChildNode

Es befindet sich derzeit in den Living Standards und ist sicher zu verwenden.

Für nicht unterstützte Browser (z.B. IE), verwenden Sie dieses Polyfill: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js

Mir ist klar, dass das Polyfill Proto Overrides verwendet, als ich sagte, dass sie eine schlechte Praxis sind. Sie sind, vor allem, wenn sie blind verwendet werden, wie mit meiner ersten Lösung. Das Polyfill in der MDN-Dokumentation verwendet jedoch eine Form der Initialisierung und Ausführung, die im Vergleich zum einfachen Überschreiben eines Prototyps wesentlich zuverlässiger und sicherer ist.

Wie man ChildNode verwendet:

// Parent 
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Insert Before Element
el.before(newEl);

// Insert After Element
el.after(newEl);

// Just remember you cant use .after() or .before()
// after either is already called.
// You cant place one element in two places at once.

// Another feature of ChildNode is the .remove() method,
// which deletes the element from the DOM
el.remove();
newEl.remove();

Answer 5

insertAdjacentHTML + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

Die Vorteile:

• DRYer: Sie müssen den Before-Knoten nicht in einer Variablen speichern und zweimal verwenden. Wenn Sie die Variable umbenennen, muss sie weniger oft geändert werden.
• golft besser als die insertBefore (bricht auch dann ab, wenn der vorhandene Knotenvariablenname 3 Zeichen lang ist)

Die Nachteile:

• geringere Browserunterstützung seit neueren Versionen: https://caniuse.com/#feat=insert-adjacent
• verliert Eigenschaften des Elements wie Ereignisse, weil outerHTML wandelt das Element in eine Zeichenkette um. Wir brauchen das, weil insertAdjacentHTML fügt Inhalte aus Zeichenketten statt aus Elementen hinzu.