I need to move a <div> inside another as a first child. Suppose, I have a <div class="wrap"> within its parent <div id="wpbody-content">. Now, I need to attach a <div> inside the <div class="wrap"> as a first child. Here is my code that I tried:

document.addEventListener("DOMContentLoaded", function(event) {
  const 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);
});

But it appends the <div> as the last child.

I need to move a <div> inside another as a first child. Suppose, I have a <div class="wrap"> within its parent <div id="wpbody-content">. Now, I need to attach a <div> inside the <div class="wrap"> as a first child. Here is my code that I tried:

document.addEventListener("DOMContentLoaded", function(event) {
  const 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);
});

But it appends the <div> as the last child.

• javascript
• html

• getElementsByClassName returns an array.. did you forget a [0] before the firstChild bit? BTW this isn't how I'd write it... your lines are too long, you should be able to simplify at least with an intermediate variable. – Adam D. Ruppe Commented Nov 14, 2015 at 2:53

3 Answers 3

Use a function that arranges append like this function prependEle(parent, child);

See the very bottom of js code:

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

You forgot to get first element by doing [0] when you are inserting the element before first child.

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

Improve version

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

You can use Node.insertBefore to acpolish it. Here is a the code and a demo

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%

You can also view a working model HERE. Just for demonstration I have used css, which you can avoid or modify accordingly.

Hope this will be useful