使用javascript在另一个div之后附加一个div

Question

javascript 中是否有任何预定义的方法可以在 div 后附加 div？例如：

<div class="uploader">
    <div class="file-metas">
        <div class="file-name">status<span class="file-size">1kb</span></div>
        <p class="state state-success">Success</p>
    </div>
</div>

现在我想在 'uploader' div 之后插入另一个类名为 'remove' 的 div。

Answer 1

是的，可以使用纯 javascript

您可以使用 insertBefore 方法通过访问目标元素的父节点来执行此操作。

document.getElementsByClassName("uploader").parentNode

看一看

Answer 2

试试这个演示

var node = document.querySelector(".uploader"),
    ele = document.createElement("div");

ele.className = "remove";
ele.innerHTML = "some text";
node.parentNode.insertBefore(ele, node.nextSibling);

Answer 3

Vanilla JS：所有浏览器都支持：

职位名称可视化

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

代码

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

更多信息请点击此处