使用javascript在另一个div之后追加一个div_Javascript

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

javascript

使用javascript在另一个div之后追加一个div,javascript,Javascript,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">

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>


状态1KB
成功

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

是的，可以使用纯javascript

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

document.getElementsByClassName("uploader").parentNode

试试这个

以下示例演示了使用纯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>


函数addNewDiv（）{
var newDiv=document.createElement（'div'）；
var label=document.createTextNode（“-new div-”）；
var elements=document.getElementsByClassName（'uploader'）；
var uploaderDiv=元素[0]；
newDiv.appendChild（标签）；
元素[0].insertBefore（newDiv，uploaderDiv.children[0]）；
}    
状态1KB
成功

也许你应该缩进你的HTML代码，这样我们就可以阅读它了。：-）您可以使用jquery来完成任务easier@rajansoft1：我没有使用jquery，所以我只需要javascript代码，像这样@Anjil panchal：你为什么不使用jquery？只是想知道为什么不愿意使用jquery。

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

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

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