js实现insertafter
实现 insertAfter 方法
在 JavaScript 中，DOM 操作没有内置的 insertAfter 方法，但可以通过组合现有方法实现。以下是两种常见实现方式：
方法一：使用 insertBefore 和 nextSibling
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}方法二：处理末尾节点情况
function insertAfter(newNode, referenceNode) {
const parent = referenceNode.parentNode;
const nextSibling = referenceNode.nextSibling;
if (nextSibling) {
parent.insertBefore(newNode, nextSibling);
} else {
parent.appendChild(newNode);
}
}使用示例
<div id="container">
<div id="first">First element</div>
<div id="second">Second element</div>
</div>
<script>
const container = document.getElementById('container');
const reference = document.getElementById('second');
const newNode = document.createElement('div');
newNode.textContent = 'New element';
newNode.id = 'new';
insertAfter(newNode, reference);
</script>注意事项
- 确保
referenceNode有父节点，否则会抛出错误 - 如果
referenceNode是最后一个子节点，新节点会被追加到末尾 - 现代浏览器中可以使用
Element.after()方法，但兼容性需要考虑
兼容性解决方案
对于需要支持旧浏览器的项目，可以扩展 Node.prototype：
if (!Node.prototype.insertAfter) {
Node.prototype.insertAfter = function(newNode, referenceNode) {
this.insertBefore(newNode, referenceNode.nextSibling);
};
}这样就能像原生方法一样使用：
document.getElementById('container').insertAfter(newNode, referenceNode);
