it-swarm.com.de

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

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

582
Xah Lee
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Dabei ist referenceNode der Knoten, nach dem newNode eingefügt werden soll. Wenn referenceNode das letzte untergeordnete Element innerhalb des übergeordneten Elements ist, ist dies in Ordnung, da referenceNode.nextSiblingnull ist und insertBefore diesen Fall durch Hinzufügen am Ende der Liste behandelt.

So:

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

Versuch es hier.

1035
karim79

Einfaches JavaScript wäre wie folgt:

Vorher anhängen:

element.parentNode.insertBefore(newElement, element);

Anhängen nach:

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

Aber werfen Sie einige Prototypen für die Benutzerfreundlichkeit

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

  • newElement.appendBefore(element);

  • newElement.appendAfter(element);

. appendBefore (element) Prototype

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

. appendAfter (element) Prototype

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

Führen Sie den folgenden Codeausschnitt 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

79
Armando

Eine schnelle Google-Suche enthüllt 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);
    }
}
31
James Long

insertAdjacentHTML + outerHTML

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

Upsides:

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

Nachteile:

  • niedrigere Browserunterstützung seit neueren Versionen: https://caniuse.com/#feat=insert-adjacent
  • die Eigenschaften des Elements wie etwa Ereignisse gehen verloren, da outerHTML das Element in einen String konvertiert. Wir brauchen es, weil insertAdjacentHTML Inhalt von Strings anstelle von Elementen hinzufügt.

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 ) Damit können Sie auf jedes Element verweisen und das zu verschiebende Element genau dort einfügen, wo Sie es wünschen:

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

Andere, die für ähnliche Anwendungsfälle zu berücksichtigen sind: insertAdjacentHTML() und insertAdjacentText()

Verweise:

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElementhttps://developer.mozilla.org/en-US/docs/Web/ API/Element/insertAdjacentHTMLhttps://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

9
bit-less

node1.after(node2) erzeugt <node1/><node2/>,

dabei sind Knoten1 und Knoten2 DOM-Knoten.

.after() wird von älteren Browsern nicht unterstützt [1] , daher müssen Sie möglicherweise eine Polyfill-Komponente anwenden.

7
golopot

Oder Sie können einfach tun:

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

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);
4
Malik Khalil

die insertBefore () -Methode wird wie parentNode.insertBefore()..__ verwendet. Um dies nachzuahmen und eine Methode parentNode.insertAfter() zu 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 sich jetzt unterscheiden. Also entscheiden Sie selbst.

JavaScript DOM insertAfter () - Methode @ jsfiddle.net

2
Dmytro Dzyubak

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

  • Wenn keine Kinder vorhanden sind, wird die neue Node angehängt
  • Wenn keine Referenz Node vorhanden ist, wird die neue Node angehängt
  • Wenn nach der Referenz Node keine Node vorhanden ist, wird die neue Node angehängt
  • Wenn dort die Referenz Node ein Geschwister hat, wird die neue Node vor diesem Geschwister eingefügt
  • Gibt die neue Node zurück

Erweiterung Node

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

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

    return node;
};

Ein allgemeines 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>

1
Darlesson

Dieser Code dient zum Einfügen eines Linkelements direkt nach dem letzten vorhandenen untergeordneten Element in Inlining einer kleinen CSS-Datei

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

Ich weiß, dass diese Frage schon zu viele Antworten hat, aber keine von ihnen erfüllte meine genauen Anforderungen.

Ich wollte eine Funktion, die genau das gegenteilige Verhalten von parentNode.insertBefore hat - das heißt, sie muss eine Null referenceNode akzeptieren (die die akzeptierte Antwort nicht akzeptiert) und die insertBefore am end der untergeordneten Elemente muss am start eingefügt werden, da ansonsten mit dieser Funktion überhaupt keine Möglichkeit zum Einfügen am Startort besteht; aus demselben Grund fügt insertBefore am Ende ein.

Da für einen Nullwert referenceNode das Auffinden des übergeordneten Elements erforderlich ist, müssen wir das übergeordnete Element kennen. insertBefore ist eine Methode des parentNode-Objekts. Daher hat es Zugriff auf das übergeordnete Element. 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 nicht, empfehle ich es nicht), können Sie den Node-Prototyp natürlich verbessern:

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

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

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

0
Doug LN

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'."));

};

0
jszhou

Lässt alle Szenarien handhaben

 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);            
    }
0
Sami
if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}
0
yavuzkavus
 <!DOCTYPE html>
 <html lang="ca">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function createDiv(){
            var newDiv = document.createElement("div");
            var txt = document.createTextNode("I'm the second div");
            newDiv.appendChild(txt);
            var x = document.getElementsByTagName("BODY")[0];
            x.insertBefore(newDiv, third);
        }
    </script>
</head>
<body>
    <div class="first">
        <p>
            I'm the first div
        </p>
    </div>
    <div id="third">
        <p>
            I'm the third div
        </p>
    </div>
    <button type= " button " name= " button " onclick = " createDiv() " >
        Create the second Div
    </button>
</body>
</html>
0
Kunal Awasthi