logo标签列表

使用JavaScript在一个div后追加另一个div

javascript
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 后面插入另一个 class 名为 'remove' 的 div。
1
也许你应该缩进你的HTML代码，这样我们就可以阅读它了。 :-) - fero
你可以使用jQuery来简化你的任务。 - rajansoft1
@rajansoft1：我没有使用jQuery，所以我只想要JavaScript代码。 - Anjil panchal
像这个吗？http://stackoverflow.com/questions/7690582/manipulating-dom-with-framework-less-javascript - Vegar
@Anjil Panchal：你为什么不使用jQuery？只是想知道你为什么不愿意使用jQuery。 - rajansoft1
5个回答
5

纯JavaScript：支持所有浏览器：

位置名称的可视化

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

更多信息请点击这里

5

是的，使用纯JavaScript是可以实现的。

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

document.getElementsByClassName("uploader").parentNode

Take a look

5

尝试这个演示

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

ele.className = "remove";
ele.innerHTML = "some text";
node.parentNode.insertBefore(ele, node.nextSibling);
0
function appendAfter(divToAppend, siblingBefore) {
    if(siblingBefore.nextSibling) {
        siblingBefore.parentNode.insertBefore(divToAppend, siblingBefore.nextSibling);
    } else {
        siblingBefore.parentNode.appendChild(divToAppend);
    }
}
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接