Question

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

Answer 1

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

referenceNode是您想要放置newNode的节点。如果referenceNode是其父元素中的最后一个子元素，那很好，因为referenceNode.nextSibling将null和insertBefore通过添加到列表末尾来处理该情况。 / p>

所以：

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

Try it here.

Answer 2

直截了当的JavaScript将是以下：

追加前：

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>

Run it on JSFiddle

Answer 3

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

Answer 4

insertAdjacentHTML + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

上升空间：

DRYer：您不必将前节点存储在变量中并使用它两次。如果重命名变量，则在较少的情况下进行修改。
高尔夫球比insertBefore更好（即使现有节点变量名称长度为3个，也会中断）

缺点：

较新的浏览器支持：https://caniuse.com/#feat=insert-adjacent
将丢失元素的属性，例如事件，因为outerHTML将元素转换为字符串。我们需要它，因为insertAdjacentHTML添加了字符串而不是元素的内容。

Answer 5

虽然UnboundLocalError（请参阅MDN）很棒，但大多数答案都引用了此处。为了增加灵活性，并且要更加明确，您可以使用：

i（参见MDN）这可以让您引用任何元素，并将要移动的元素准确插入到您想要的位置：

insertBefore()

其他需要考虑的类似用例：insertAdjacentElement()和 <p id="refElem">  ... content ...  </p> 

参考文献：

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

Answer 6

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

其中node1和node2是DOM节点。

旧浏览器[1]不支持

.after()，因此您可能需要应用填充。

Answer 7

或者您可以这样做：

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )

Answer 8

这是我们可以使用香草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

Answer 9

实际上，在较新版本的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元素之后

Answer 10

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年，现在情况可能有所不同。所以决定你自己。

JavaScript DOM insertAfter() method @ jsfiddle.net

Answer 11

理想情况下，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);

查看正在运行的代码

＆＃13;

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

Answer 12

我知道这个问题很古老，但是对于任何将来的用户来说，这是一个经过修改的原型

这只是不存在的.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'));

Answer 13

 <!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>

Answer 14

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

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

Answer 15

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.

};

Answer 16

让我们处理所有场景

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

Answer 17

此代码用于将最后一个现有子项后面的链接项插入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);

Answer 18

if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}

Answer 19

我知道这个问题已经有太多答案了，但是没有一个满足我的确切要求。

我想要一个具有与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 ); }; }

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

19 个答案:

直截了当的JavaScript将是以下：

但是，在那里折腾一些原型以便于使用

并且，要查看全部操作，请运行以下代码段