4

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。

4

5 回答 5

5

是的，可以使用纯 javascript

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

document.getElementsByClassName("uploader").parentNode

看一看

于 2013-06-05T09:42:28.847 回答
5

试试这个演示

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

ele.className = "remove";
ele.innerHTML = "some text";
node.parentNode.insertBefore(ele, node.nextSibling);
于 2013-06-05T09:53:10.423 回答
1

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>

更多信息在这里

于 2021-06-15T06:38:41.010 回答
0 
function appendAfter(divToAppend, siblingBefore) {
    if(siblingBefore.nextSibling) {
        siblingBefore.parentNode.insertBefore(divToAppend, siblingBefore.nextSibling);
    } else {
        siblingBefore.parentNode.appendChild(divToAppend);
    }
}
于 2013-06-05T09:44:52.333 回答
0

以下示例演示了您尝试使用纯 JavaScript 实现的目标：

<html>
<head>

<script>

function addNewDiv() {
    var newDiv = document.createElement('div');
    var label = document.createTextNode(" - new div - ");
    var elements = document.getElementsByClassName('uploader');
    var uploaderDiv = elements[0];

    newDiv.appendChild(label);
    elements[0].insertBefore(newDiv, uploaderDiv.children[0]);
}    

</script>

</head>
<body>

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

<input type="button" onClick="addNewDiv()" value="Add new Div" />

</body>
</html>
于 2013-06-05T09:57:18.940 回答