使用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

尝试此Demo

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>

更多信息here