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?
Sie können tatsächlich eine Methode namens after() in neueren Versionen von Chrome, Firefox und Opera. Der Nachteil dieser Methode ist, dass der Internet Explorer sie noch nicht unterstützt.
例
// 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, um das zu 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 Element "oben" nach dem Element "unten" verschoben.
InsertBefore()-Methode wird verwendet wie parentNode.insertBefore() . Um dies zu imitieren und eine Methode zu entwickeln parentNode.insertAfter() 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 dieser Artikel .
Hovewer, dieser Artikel wurde im Jahr 2010 geschrieben und die Dinge könnten jetzt anders sein. Entscheiden Sie also selbst.
Idealerweise insertAfter sollte ähnlich funktionieren wie insertBefore . Der folgende Code führt Folgendes aus:
Node ist angefügtNode die neue Node ist angefügtNode nach dem Verweis Node die neue Node ist angefügtNode ein Geschwisterkind hat, dann wird das neue Node wird vor diesem Geschwisterkind eingefügtNodeErweitern Sie Node
Node.prototype.insertAfter = function(node, referenceNode) {
if (node)
this.insertBefore(node, referenceNode && referenceNode.nextSibling);
return node;
};Ein gängiges Beispiel
node.parentNode.insertAfter(newNode, node);Sehen Sie 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 es auf diese Frage bereits viel zu viele Antworten gibt, aber keine von ihnen entsprach meinen Anforderungen.
Ich wollte eine Funktion, die genau das gegenteilige Verhalten von parentNode.insertBefore - das heißt, sie muss eine Null akzeptieren referenceNode (die die akzeptierte Antwort nicht) und wo insertBefore an der Stelle einfügen würde Ende der Kinder, die man bei der Anmeldung einfügen muss Start einfügen, da es sonst keine Möglichkeit gäbe, mit dieser Funktion überhaupt an der Startposition einzufügen; aus demselben Grund insertBefore am Ende einfügt.
Da eine Null referenceNode erfordert, dass Sie das Elternteil ausfindig machen, müssen wir das Elternteil kennen - insertBefore ist eine Methode der parentNode Sie hat also auf diese Weise Zugriff auf das übergeordnete Element; unsere Funktion hat das nicht, also müssen wir das übergeordnete Element als Parameter übergeben.
Die resultierende Funktion sieht wie folgt aus:
function insertAfter(parentNode, newNode, referenceNode) {
parentNode.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : parentNode.firstChild
);
}Oder (wenn es sein muss, ich empfehle es nicht) Sie können natürlich auch die Node Prototyp:
if (! Node.prototype.insertAfter) {
Node.prototype.insertAfter = function(newNode, referenceNode) {
this.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : this.firstChild
);
};
}
Sie können verwenden appendChild Funktion zum Einfügen nach einem Element.
Referenz: http://www.w3schools.com/jsref/met_node_appendchild.asp
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
4 Stimmen
Wenn Sie den Sonderfall des allerletzten untergeordneten Knotens benötigen - stackoverflow.com/questions/5173545/
5 Stimmen
developer.mozilla.org/de-US/docs/Web/API/Element/ o developer.mozilla.org/de-US/docs/Web/API/Element/
4 Stimmen
@AlanLarimer das ist großartig. danke. wissen Sie, wann insertAdjacentElement eingeführt wurde?
1 Stimmen
Laut MDN wird es in IE8 und Firefox 48 (2016 August 08) unterstützt. Folgen Sie der Spur: bugzilla.mozilla.org/show_bug.cgi?id=811259 --> w3.org/Bugs/Public/show_bug.cgi?id=19962 (2016 März 14)