Question

在Javascript中，我需要在另一个中添加一个div作为第一个孩子。假设，我的父div wrap中有一个div class wpbody-content。现在我需要在wrap类div中附加一个div作为第一个孩子。这是我试过的代码 -

<script>
            document.addEventListener("DOMContentLoaded", function (event) {
                var div = document.createElement('div');

                div.className = 'row';

                div.innerHTML = '<input type="text" name="name" value="" />\
    <input type="text" name="value" value="" />\
    <label> <input type="checkbox" name="check" value="1" /> Checked? </label>\
    <input type="button" value="-" >';
                document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].insertBefore(div, document.getElementById("wpbody-content").getElementsByClassName("wrap").firstChild);
            });
        </script>

但它将div添加为最后一个孩子。提前谢谢！

Answer 1

使用像此函数prependEle(parent, child);

一样排列追加的函数

请参阅js代码的最底部：

    document.addEventListener("DOMContentLoaded", function (event) {
            var div = document.createElement('div');

            div.className = 'row';

            div.innerHTML = '<input type="text" name="name" value="" />\
<input type="text" name="value" value="" />\
<label> <input type="checkbox" name="check" value="1" /> Checked? </label>\
<input type="button" value="-" >';
            var wp = document.getElementById("wpbody-content");
            var firstWrap = wp.getElementsByClassName("wrap")[0];
               prependEle(firstWrap, div);
        });
        function prependEle(parent, child) {
          parent.insertBefore(child, parent.firstChild);
        };

Answer 2

当您在第一个孩子之前插入元素时，忘记了通过[0]获得第一个元素。

  document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].insertBefore(div, document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].firstChild);
//-----------------------------------------------------------------------------------------------------------------------------------------------you forgot to do this---^-----

改进版本

var wrapDiv = document.getElementById("wpbody-content").getElementsByClassName("wrap")[0]; 
wrapDiv.insertBefore(div, wrapDiv.firstChild);

Answer 3

您可以使用Node.insertBefore来同化它。这是代码和演示

HTML

<div id='parentDiv'></div>
<button type="button" onclick="addDiv()">Add Div</div>

JS

function addDiv(){
 var _getParent = document.getElementById('parentDiv');
 var _getFirstChild = _getParent.childNodes.length;
 var _createElement = document.createElement('div');
 _createElement.id= "child_"+parseInt(_getFirstChild+1);
 _createElement.classList.add('childElem');
 _createElement.innerHTML="I am child "+parseInt(_getFirstChild+1)
_insertChild(_getParent,_createElement,_getParent.childNodes[0]);
}

function _insertChild(parent,newElem,refElem){
parent.insertBefore(newElem,refElem);

}

CSS

.childElem{
    background-color:green;
    border-radius:7px;
    width:50;
    margin-bottom:5px;
    padding:5%

您还可以查看工作模型HERE。仅用于演示我使用了css，您可以避免或相应地修改它。

希望这会有用

Javascript将div作为第一个孩子添加到另一个div中

3 个答案: