Javascript在第一个孩子里面追加一个div

在Javascript我需要在另一个div中追加一个div作为第一个孩子。假设，我在其父公司ID为wpbody-content的div类wrap。现在我需要在wrap class div内附上一个div作为第一个孩子。这里是我的代码，我试图 -Javascript在第一个孩子里面追加一个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作为最后一个孩子。提前致谢！

来源

2015-11-14 user3384985

getElementsByClassName方法返回一个数组..你忘记的则firstChild位[0]之前有用吗？顺便说一句，这不是我如何写它......你的线太长，你应该能够至少用一个中间变量来简化。 –

使用像这个函数prependEle（父，子）一样安排追加的函数;

见代码的最底部：

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); 
     };

来源

2015-11-14 03:08:25 zer00ne

你忘了做[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);

来源

2015-11-14 03:35:38

您可以使用Node.insertBefore到accompolish它。这里是一个代码和演示

HTML

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

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，您可以相应地避免或修改它。

希望这将是

来源

2015-11-14 03:49:27 brk

Javascript在第一个孩子里面追加一个div

回答

相关问题