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

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

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

Wo referenceNodeist der Knoten, newNodenach dem Sie setzen möchten? Wenn referenceNodees das letzte Kind in seinem übergeordneten Element ist, ist das in Ordnung, denn es referenceNode.nextSiblingwird nullund seininsertBefore Griffe , die von Fall zu Ende der Liste hinzugefügt.

Damit:

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

Sie können es mit dem folgenden Snippet 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>

Einfaches JavaScript wäre das Folgende:

Vorher anhängen:

element.parentNode.insertBefore(newElement, element);

Anhängen nach:

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

Werfen Sie jedoch einige Prototypen ein, um die Verwendung zu vereinfachen

Durch Erstellen der folgenden Prototypen können Sie diese Funktion 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;

Führen Sie das folgende Code-Snippet aus, um alles in Aktion zu sehen

/* 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

insertAdjacentHTML + outerHTML

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

Vorteile:

• DRYer: Sie müssen den Vorher-Knoten nicht in einer Variablen speichern und zweimal verwenden. Wenn Sie die Variable umbenennen, müssen Sie sie bei weniger Vorkommen ändern.
• Golf besser als die insertBefore(Break Even, wenn der Name der vorhandenen Knotenvariablen 3 Zeichen lang ist)

Nachteile:

• Geringere Browserunterstützung seit neuerer Version : https://caniuse.com/#feat=insert-adjacent
• verliert Eigenschaften des Elements wie Ereignisse, da outerHTMLdas Element in eine Zeichenfolge konvertiert wird. Wir brauchen es, weil insertAdjacentHTMLInhalte eher aus Zeichenfolgen als aus Elementen hinzugefügt werden.

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);
    }
}

Obwohl insertBefore()(siehe MDN ) großartig ist und von den meisten Antworten hier referenziert wird. Für zusätzliche Flexibilität und um etwas expliziter zu sein, können Sie Folgendes verwenden:

insertAdjacentElement()(siehe MDN ) Auf diese Weise können Sie auf ein beliebiges Element verweisen und das zu verschiebende Element genau dort einfügen, wo Sie möchten:

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

Andere für ähnliche Anwendungsfälle zu berücksichtigen: insertAdjacentHTML()undinsertAdjacentText()

Verweise:

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

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

Für zwei DOM-Knoten node1und node2,

node1.after(node2)fügt node2nach node1.

Diese Methode ist in älteren Browsern nicht verfügbar, daher ist normalerweise eine Polyfüllung erforderlich.

Lösung 2018 (schlechte Praxis, bis 2020)

Ich weiß, dass diese Frage uralt ist, aber für zukünftige Benutzer ist dies ein modifizierter Prototyp. Dies ist nur eine Mikro-Polyfüllung für die .insertAfter-Funktion, die nicht vorhanden ist. Dieser Prototyp fügt baseElement.insertAfter(element);dem Element-Prototyp direkt eine neue Funktion hinzu :

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

Sobald Sie die Polyfüllung in einer Bibliothek, einem Kern oder nur in Ihrem Code (oder an einer anderen Stelle, an der darauf verwiesen werden kann) platziert haben, schreiben Sie einfach document.getElementById('foo').insertAfter(document.createElement('bar'));

2019 Lösung (Hässlich, gehe zu 2020)

Neue Bearbeitung: Sie sollten keine Prototypen verwenden. Sie überschreiben die Standardcodebasis und sind nicht sehr effizient oder sicher und können Kompatibilitätsfehler verursachen. Wenn dies jedoch für nichtkommerzielle Projekte gilt, sollte dies keine Rolle spielen. Wenn Sie eine sichere Funktion für den kommerziellen Gebrauch wünschen, verwenden Sie einfach eine Standardfunktion. es ist nicht schön, aber es funktioniert:

function insertAfter(el, newEl) {
    el.parentNode.insertBefore(newEl, this.nextSibling);
}

// use

const el = document.body || document.querySelector("body");
// the || means "this OR that"

el.insertBefore(document.createElement("div"), el.nextSibling);
// Insert Before

insertAfter(el, document.createElement("div"));
// Insert After 

2020 Lösung

Aktuelle Webstandards für ChildNode: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode

Es ist derzeit im Lebensstandard und ist sicher.

Verwenden Sie für nicht unterstützte Browser diese Polyfüllung: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js

Jemand erwähnte, dass die Polyfüllung Protos verwendet, als ich sagte, dass sie eine schlechte Praxis seien. Sie sind, besonders wenn sie falsch verwendet werden, wie meine Lösung für 2018. Diese Polyfüllung befindet sich jedoch in der MDN-Dokumentation und verwendet eine Art Initialisierung und Ausführung, die sicherer ist. Außerdem ist es für die Unterstützung älterer Browser gedacht, in der Zeit, in der das Überschreiben von Prototypen nicht so schlecht war.

So verwenden Sie die 2020-Lösung:

const el = document.querySelector(".class");

// Create New Element
const newEl = document.createElement("div");
newEl.id = "foo";

// Insert New Element BEFORE
el.before(newEl);

// Insert New Element AFTER
el.after(newEl);

// Remove Element
el.remove();

// Remove Child
newEl.remove(); // This one wasnt tested but should work

Oder Sie können einfach tun:

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

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);

Die Methode insertBefore () wird wie folgt verwendet parentNode.insertBefore(). Um dies nachzuahmen und eine Methode zu parentNode.insertAfter()erstellen, können wir den folgenden Code schreiben.

JavaScript

Node.prototype.insertAfter = function(newNode, referenceNode) {
    return referenceNode.parentNode.insertBefore(
        newNode, referenceNode.nextSibling); // based on karim79's solution
};

// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;

// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);

// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);

HTML

<div id="divOne">
    <p id="pOne">paragraph one</p>
    <p id="pTwo">paragraph two</p>
</div>

Beachten Sie, dass die Erweiterung des DOM möglicherweise nicht die richtige Lösung für Sie ist, wie in diesem Artikel angegeben .

Hovewer, dieser Artikel wurde 2010 geschrieben und die Dinge könnten jetzt anders sein. Entscheide dich also selbst.

JavaScript DOM insertAfter () -Methode @ jsfiddle.net

Idealerweise insertAftersollte ähnlich wie insertBefore funktionieren . Der folgende Code führt Folgendes aus:

• Wenn keine Kinder vorhanden sind, wird das neue Nodeangehängt
• Wenn keine Referenz vorhanden ist Node, wird die neue Nodeangehängt
• Wenn Nodenach der Referenz keine vorhanden ist Node, wird die neue Nodeangehängt
• Wenn dort die Referenz Nodeein Geschwister hat, wird das neue Nodevor diesem Geschwister eingefügt
• Gibt das neue zurück Node

Erweitern Node

Node.prototype.insertAfter = function(node, referenceNode) {

    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

Ein häufiges Beispiel

node.parentNode.insertAfter(newNode, node);

Siehe den laufenden Code

// First extend
Node.prototype.insertAfter = function(node, referenceNode) {
    
    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

var referenceNode,
    newNode;

newNode = document.createElement('li')
newNode.innerText = 'First new item';
newNode.style.color = '#FF0000';

document.getElementById('no-children').insertAfter(newNode);

newNode = document.createElement('li');
newNode.innerText = 'Second new item';
newNode.style.color = '#FF0000';

document.getElementById('no-reference-node').insertAfter(newNode);

referenceNode = document.getElementById('no-sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Third new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

referenceNode = document.getElementById('sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Fourth new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

<h5>No children</h5>
<ul id="no-children"></ul>

<h5>No reference node</h5>
<ul id="no-reference-node">
  <li>First item</li>
</ul>

<h5>No sibling after</h5>
<ul>
  <li id="no-sibling-after">First item</li>
</ul>

<h5>Sibling after</h5>
<ul>
  <li id="sibling-after">First item</li>
  <li>Third item</li>
</ul>

Ich weiß, dass diese Frage bereits viel zu viele Antworten hat, aber keine davon hat meine genauen Anforderungen erfüllt.

Ich wollte eine Funktion, die genau das entgegengesetzte Verhalten hatparentNode.insertBefore - das heißt, sie muss eine Null akzeptierenreferenceNode (was die akzeptierte Antwort nicht tut) und wo insertBefoream Ende der Kinder diese einfügen würde, muss diese am Anfang eingefügt werden , da sonst ' Es ist überhaupt nicht möglich, mit dieser Funktion am Startort einzufügen. der gleiche Grund insertBeforefügt am Ende ein.

Da Sie für eine Null referenceNodedas übergeordnete Element suchen müssen, müssen wir das übergeordnete Element kennen. Dies insertBeforeist eine Methode von parentNode, sodass auf diese Weise auf das übergeordnete Element zugegriffen werden kann. Unsere Funktion funktioniert nicht, daher müssen wir das übergeordnete Element als Parameter übergeben.

Die resultierende Funktion sieht folgendermaßen aus:

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

Oder (wenn Sie müssen, ich empfehle es nicht) können Sie natürlich den NodePrototyp verbessern :

if (! Node.prototype.insertAfter) {
  Node.prototype.insertAfter = function(newNode, referenceNode) {
    this.insertBefore(
      newNode,
      referenceNode ? referenceNode.nextSibling : this.firstChild
    );
  };
}

Mit diesem Code wird ein Linkelement direkt nach dem letzten vorhandenen untergeordneten Element eingefügt, um eine kleine CSS-Datei einzufügen

var raf, cb=function(){
    //create newnode
    var link=document.createElement('link');
    link.rel='stylesheet';link.type='text/css';link.href='css/style.css';

    //insert after the lastnode
    var nodes=document.getElementsByTagName('link'); //existing nodes
    var lastnode=document.getElementsByTagName('link')[nodes.length-1]; 
    lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};

//check before insert
try {
    raf=requestAnimationFrame||
        mozRequestAnimationFrame||
        webkitRequestAnimationFrame||
        msRequestAnimationFrame;
}
catch(err){
    raf=false;
}

if (raf)raf(cb); else window.addEventListener('load',cb);

Sie können verwenden appendChild Funktion verwenden, um nach einem Element einzufügen.

Referenz: http://www.w3schools.com/jsref/met_node_appendchild.asp

eine robuste Implementierung von insertAfter.

// source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js
Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) {
  function isNode(node) {
    return node instanceof Node;
  }

  if(arguments.length < 2){
    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present."));
  }

  if(isNode(newNode)){
    if(referenceNode === null || referenceNode === undefined){
      return this.insertBefore(newNode, referenceNode);
    }

    if(isNode(referenceNode)){
      return this.insertBefore(newNode, referenceNode.nextSibling);
    }

    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'."));
  }

  throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'."));

};

Behandeln wir alle Szenarien

 function insertAfter(newNode, referenceNode) {
        if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == '#text')
            referenceNode = referenceNode.nextSibling;

        if(!referenceNode)
            document.body.appendChild(newNode);
        else if(!referenceNode.nextSibling)
            document.body.appendChild(newNode);
        else            
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);            
    }

if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}

Sie können tatsächlich eine Methode verwenden, die after()in einer neueren Version von Chrome, Firefox und Opera aufgerufen wird . Der Nachteil dieser Methode ist, dass Internet Explorer sie noch nicht unterstützt.

Beispiel:

// You could create a simple node
var node = document.createElement('p')

// And then get the node where you want to append the created node after
var existingNode = document.getElementById('id_of_the_element')

// Finally you can append the created node to the exisitingNode
existingNode.after(node)

Ein einfacher HTML-Code zum Testen ist:

<!DOCTYPE html>
<html>
<body>
     <p id='up'>Up</p>
    <p id="down">Down</p>
  <button id="switchBtn" onclick="switch_place()">Switch place</button>
  <script>
    function switch_place(){
      var downElement = document.getElementById("down")
      var upElement = document.getElementById("up")
      downElement.after(upElement);
      document.getElementById('switchBtn').innerHTML = "Switched!"
    }
  </script>
</body>
</html>

Wie erwartet wird das Aufwärtselement nach dem Abwärtselement verschoben