如何在不使用库的情况下在JavaScript中的另一个元素之后插入一个元素？

JavaScript

蛋蛋伽罗猿

2020-03-11

还有insertBefore()在JavaScript，但我怎么能插入一个元素后，另一种元素，而不使用jQuery或其他库？

第638篇《如何在不使用库的情况下在JavaScript中的另一个元素之后插入一个元素？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
小卤蛋LEY 2020.03.11

您可以使用appendChild函数在元素之后插入。

参考：http : //www.w3schools.com/jsref/met_node_appendchild.asp

逆天前端宝儿 2020.03.11 
if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}
GOMandy 2020.03.11

或者您可以简单地执行以下操作：

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )
斯丁逆天A 2020.03.11

node1.after(node2)产生<node1/><node2/>，

其中node1和node2是DOM节点。

.after()较旧的浏览器[1]不支持，因此您可能需要应用polyfill。

参考：https : //developer.mozilla.org/en-US/docs/Web/API/ChildNode/after

神乐飞云逆天 2020.03.11 
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

referenceNode您要放置的节点在哪里newNode。If referenceNode是其父元素中的最后一个子元素，这很好，因为referenceNode.nextSibling它将是，null并insertBefore通过添加到列表的末尾来处理这种情况。

所以：

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

在这里尝试。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android