如何在JavaScript中插入另一个元素后的元素而不使用库?

在JavaScript中有insertBefore()，但如何在不使用jQuery或其他库的情况下在另一个元素之后插入一个元素?

当前回答

方法节点。After (doc)在另一个节点之后插入一个节点。

对于两个DOM节点node1和node2，

node1.after(node2)在node1之后插入node2。

这个方法在旧的浏览器中是不可用的，所以通常需要填充。

2016-10-27 07:55:24

其他回答

让我们来处理所有的情况

 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);            
    }

2018-04-11 10:13:48

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>

2011-01-25 12:42:32

快速搜索谷歌会显示这个脚本

// 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);
    }
}

2011-01-25 12:43:00

简单的JavaScript代码如下:

附加:

element.parentNode.insertBefore(newElement, element);

添加后:

element.parentNode.insertBefore(newElement, element.nextSibling);

但为了便于使用，可以在这里添加一些原型:

通过构建以下原型，您将能够直接从新创建的元素调用这些函数。

newElement.appendBefore(元素); newElement.appendAfter(元素);

.appendBefore(元素)的原型

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter(元素)的原型

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>

在JSFiddle上运行它

2015-08-21 08:05:13