JavaScript中有insertBefore()
,但如何在不使用jQuery或其他库的情况下在另一个元素后插入元素?
答案 0 :(得分:1088)
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
referenceNode
是您想要放置newNode
的节点。如果referenceNode
是其父元素中的最后一个子元素,那很好,因为referenceNode.nextSibling
将null
和insertBefore
通过添加到列表末尾来处理该情况。 / p>
所以:
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
答案 1 :(得分:66)
追加前:
element.parentNode.insertBefore(newElement, element);
追加后:
element.parentNode.insertBefore(newElement, element.nextSibling);
通过构建以下原型,您将能够直接从新创建的元素中调用这些函数。
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;
/* 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>
答案 2 :(得分:34)
快速Google搜索显示this script
// 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);
}
}
答案 3 :(得分:32)
insertAdjacentHTML
+ outerHTML
elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)
上升空间:
insertBefore
更好(即使现有节点变量名称长度为3个,也会中断)缺点:
outerHTML
将元素转换为字符串。我们需要它,因为insertAdjacentHTML
添加了字符串而不是元素的内容。答案 4 :(得分:10)
虽然UnboundLocalError
(请参阅MDN)很棒,但大多数答案都引用了此处。为了增加灵活性,并且要更加明确,您可以使用:
i
(参见MDN)这可以让您引用任何元素,并将要移动的元素准确插入到您想要的位置:
insertBefore()
其他需要考虑的类似用例:insertAdjacentElement()
和<!-- refElem.insertAdjacentElement('beforebegin', moveMeElem); -->
<p id="refElem">
<!-- refElem.insertAdjacentElement('afterbegin', moveMeElem); -->
... content ...
<!-- refElem.insertAdjacentElement('beforeend', moveMeElem); -->
</p>
<!-- refElem.insertAdjacentElement('afterend', moveMeElem); -->
参考文献:
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
答案 5 :(得分:9)
答案 6 :(得分:4)
或者您可以这样做:
referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )
答案 7 :(得分:3)
这是我们可以使用香草javascript在另一个元素之间添加元素的最简单方法
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
参考: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
答案 8 :(得分:2)
实际上,在较新版本的Chrome,Firefox和Opera中,可以使用一种名为after()
的方法。这种方法的缺点是Internet Explorer尚不支持。
示例:
// 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)
要测试的简单HTML代码为:
<!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>
如预期的那样,它将up元素移动到down元素之后
答案 9 :(得分:2)
insertBefore()方法与parentNode.insertBefore()
类似。
因此,为了模仿这个并制作方法parentNode.insertAfter()
,我们可以编写以下代码。
的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>
请注意,如this article中所述,扩展DOM可能不适合您。
Hovewer,这篇文章写于2010年,现在情况可能有所不同。所以决定你自己。
答案 10 :(得分:1)
理想情况下,insertAfter
应与insertBefore类似。以下代码将执行以下操作:
Node
Node
,则会附加新的Node
Node
后没有Node
,则会追加新的Node
Node
之后有一个兄弟,则在该兄弟之前插入新的Node
Node
扩展Node
Node.prototype.insertAfter = function(node, referenceNode) {
if (node)
this.insertBefore(node, referenceNode && referenceNode.nextSibling);
return node;
};
一个常见的例子
node.parentNode.insertAfter(newNode, node);
查看正在运行的代码
// 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);
&#13;
<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>
&#13;
答案 11 :(得分:1)
我知道这个问题很古老,但是对于任何将来的用户来说,这是一个经过修改的原型
这只是不存在的.insertAfter函数的微型polyfill
此原型直接向Element原型添加了一个新函数baseElement.insertAfter(element);
:
Element.prototype.insertAfter = function(new) {
this.parentNode.insertBefore(new, this.nextSibling);
}
一旦将polyfill放置在库,要旨中或仅在代码中(或其他可以引用它的地方)
只需写document.getElementById('foo').insertAfter(document.createElement('bar'));
答案 12 :(得分:0)
<!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>
答案 13 :(得分:0)
您可以使用appendChild
函数在元素后插入。
答案 14 :(得分:0)
insertAfter的强大实现。
closest(_P, _PointList, _Distance, _Index) ->
case (length(_PointList =:= 0)) of
true -> {_Index, _Distance};
false ->
New_Distance = min(_Distance, distance(_P, hd(_PointList))),
case (New_Distance < _Distance) of
true -> closest(_P, tl(_PointList), New_Distance, _Index + 1);
false -> closest(_P, tl(_PointList), _Distance, _Index)
end
end.
};
答案 15 :(得分:0)
让我们处理所有场景
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);
}
答案 16 :(得分:0)
此代码用于将最后一个现有子项后面的链接项插入inlining一个小型CSS文件
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);
答案 17 :(得分:0)
if( !Element.prototype.insertAfter ) {
Element.prototype.insertAfter = function(item, reference) {
if( reference.nextSibling )
reference.parentNode.insertBefore(item, reference.nextSibling);
else
reference.parentNode.appendChild(item);
};
}
答案 18 :(得分:0)
我知道这个问题已经有太多答案了,但是没有一个满足我的确切要求。
我想要一个具有与parentNode.insertBefore
完全相反的行为的函数-也就是说,它必须接受一个空referenceNode
(accepted answer不能为空),insertBefore
将在子级的 end 处插入,该子项必须在 start 处插入,否则将无法插入完全使用此功能开始位置; insertBefore
插入末尾的原因相同。
由于空referenceNode
需要您定位父对象,因此我们需要知道父对象-insertBefore
是parentNode
的方法,因此它可以通过这种方式访问父对象;我们的函数没有,所以我们需要将父级作为参数传递。
结果函数如下:
function insertAfter(parentNode, newNode, referenceNode) {
parentNode.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : parentNode.firstChild
);
}
或者(如果您必须的话,我不推荐),您当然可以增强Node
原型:
if (! Node.prototype.insertAfter) {
Node.prototype.insertAfter = function(newNode, referenceNode) {
this.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : this.firstChild
);
};
}