在JavaScript中有insertBefore(),但如何在不使用jQuery或其他库的情况下在另一个元素之后插入一个元素?
当前回答
这是使用普通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
其他回答
理想情况下,insertAfter应该类似于insertBefore。下面的代码将执行以下操作:
如果没有子节点,则追加新的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); <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>
可以使用appendChild函数在元素之后插入。
参考:http://www.w3schools.com/jsref/met_node_appendchild.asp
快速搜索谷歌会显示这个脚本
// 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);
}
}
步骤1。准备要素:
var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;
步骤2。在后面追加:
elementParent.insertBefore(newElement, element.nextSibling);
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
这里的referenceNode是你想把newNode放在后面的节点。如果referenceNode是它的父元素中的最后一个子元素,那很好,因为referenceNode。nextSibling将为null, insertBefore通过添加到列表末尾来处理这种情况。
So:
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
你可以使用下面的代码段来测试它:
函数插入之后(引用节点, 新节点) { 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”>你好</div>
推荐文章
- 在PHP中插入MySQL时转义单引号
- 如何清除所有<div>的内容在一个父<div>?
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?