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

Question

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

Answer 1

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

referenceNode您想要放置的节点在哪里newNode.如果referenceNode是它的父元素中的最后一个孩子,这很好,因为referenceNode.nextSibling会null和insertBefore通过添加到列表的最后处理该案件.

所以:

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

在这里试试吧.

Answer 2

直截了当的JavaScript将是以下:

追加之前:

element.parentNode.insertBefore(newElement, element);

追加后:

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

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

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

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBefore(element)原型

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

.appendAfter(element)原型

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上运行它

Answer 3

insertAdjacentHTML + outerHTML

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

上升空间:

• DRYer:您不必将before节点存储在变量中并使用它两次.如果重命名变量,则在较少的情况下进行修改.
• 高尔夫球比比赛更好insertBefore(即使现有节点变量名称为3个字符长也会中断)

缺点:

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

Answer 4

快速Google搜索会显示此脚本

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

2018 年解决方案（不良做法，转到 2020 年）

我知道这个问题很古老，但对于任何未来的用户，这里有一个修改后的原型。这只是不存在的 .insertAfter 函数的 polyfill。这个原型直接将函数添加HTMLElement.insertAfter(element);到 HTMLElement Prototype 中：

// 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() 
// after either is already called.
// You cant place one element in two places at once.

2019 解决方案（丑陋/过时，转到 2020）

不要使用原型（如 2018 解决方案）。覆盖原型既危险又低质量。如果您想要一个新方法，请改用 Function Overrides。
如果您想要商业项目的安全功能，只需使用默认功能。它不那么漂亮，但它有效：

// 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()
// after either is already called.
// You cant place one element in two places at once.

2020 解决方案 - ChildNode

ChildNode 的当前 Web 标准：MDN 文档 - ChildNode

它目前符合生活标准，可以安全使用。

对于不受支持的浏览器（例如 IE），请使用此 Polyfill：https : //github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js

当我说它们是不好的做法时，我意识到 polyfill 使用了 Proto Overrides。它们是，尤其是当它们被盲目使用时，就像我的第一个解决方案一样。但是，MDN 文档中的 polyfill 使用了一种初始化和执行形式，与仅覆盖原型相比，这种形式更加可靠和安全。

如何使用子节点：

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

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

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

// Just remember you cant use .after() or .before()
// after either is already called.
// You cant place one element in two places at once.

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

Answer 6

虽然insertBefore()(参见MDN)很棒,但大多数答案在这里引用.为了增加灵活性,并且更加明确,您可以使用:

insertAdjacentElement()(请参阅MDN)这允许您引用任何元素,并将要移动的元素准确插入所需的位置:

<!-- refElem.insertAdjacentElement('beforebegin', moveMeElem); -->
<p id="refElem">
    <!-- refElem.insertAdjacentElement('afterbegin', moveMeElem); -->
    ... content ...
    <!-- refElem.insertAdjacentElement('beforeend', moveMeElem); -->
</p>
<!-- refElem.insertAdjacentElement('afterend', moveMeElem); -->

其他考虑类似用例的人:insertAdjacentHTML()和insertAdjacentText()

参考文献:

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 7

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

其中node1和node2是DOM节点.

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

Answer 8

或者你可以简单地做：

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

Answer 9

这是我们使用 vanilla 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 10

步骤 1. 准备元素：

var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;

步骤 2. 在 之后追加：

elementParent.insertBefore(newElement, element.nextSibling);

Answer 11

实际上，您可以在较新版本的 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 代码是：

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

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