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

Eine schnelle Google-Suche zeigt dieses Skript

// create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

Answer 2

Die Methode node.after ( doc ) fügt einen Knoten nach einem anderen Knoten ein.

Für zwei DOM-Knoten node1 y node2 ,

node1.after(node2) Einsätze node2 nach node1 .

Diese Methode ist in älteren Browsern nicht verfügbar, so dass in der Regel ein Polyfill erforderlich ist.

Answer 3

Dies ist der einfachste Weg, wie wir ein Element nach einem anderen mit Vanilla-Javascript hinzufügen können

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

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

Answer 4

Oder Sie können es einfach tun:

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

Answer 5

Schritt 1. Elemente vorbereiten:

var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;

Schritt 2. Anhängen nach :

elementParent.insertBefore(newElement, element.nextSibling);