2022解决方案-元素

编辑:从2021年起，ChildNode已被合并到Element中。我把这个答案改成这样。

新文档:https://developer.mozilla.org/en-US/docs/Web/API/Element

这与ChildNode完全相同。“before”，“after”和“remove”属性现在只是普通元素api的一部分。

// Parent 
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Insert Before Element
el.before(newEl);

// Insert After Element
// Technically this would be invalid because 
// I already inserted newEl before el.
// newEl changed location and is no longer a floating element.
// You cant insert one element in two places at once.
el.after(newEl);

// Another extra feature originally added with ChildNode is the .remove() method,
// which deletes the element from the DOM
el.remove();
newEl.remove();

2019年解决方案(过时)

我不推荐使用这个解决方案，但为了“历史”起见，我会把它保留在这里。

这比使用polyfill类型的原型重写更安全，它只是一个基本的功能。当然它不是很漂亮，但它是有效的。

// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Function You Need
function insertAfter(el0, el1) {
    el0.parentNode.insertBefore(el1, el0.nextSibling);
}

// Insert Before Element
el.insertBefore(newEl);

// Insert After Element
insertAfter(el, newEl);

// Just remember you cant use insertAfter() or .insertBefore()
// on newEl more than once.
// You cant insert one element in two places at once.

原始解决方案(不良做法)

我不建议使用这个解决方案，这是我最初在发布这个答案时使用的解决方案。为了“历史”，我把它留在这里

这只是一个不存在的. insertafter函数的填充。这个原型直接添加了函数HTMLElement.insertAfter(element);到HTMLElement原型:

// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Custom Method
Element.prototype.insertAfter = function(new) {
    this.parentNode.insertBefore(new, this.nextSibling);
}

// Insert Before Element
el.insertBefore(newEl)

// Insert After Element
el.insertAfter(newEl);

// Just remember you cant use .insertAfter() or .insertBefore() 
// on newEl more than once.
// You cant insert one element in two places at once.

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

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

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>

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

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

对于两个DOM节点node1和node2，

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

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

你可以在新版本的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 > 身体< > < p id =“了”> < / p > < p id = "下来“> < / p > <button id="switchBtn" onclick="switch_place()“>开关的地方> < /按钮 <脚本> 函数switch_place () { var downElement = document.getElementById("down") var upElement = document.getElementById("up") downElement.after (upElement); . getelementbyid(“switchBtn”)。innerHTML = "切换!" ｝ > < /脚本 < /身体> < / html >

正如预期的那样，它在向下的元素之后移动向上的元素