How to Move an element in a div into another div on trigger of an event using JavaScript?

Question

<div id='one'>
<div id='oneone'>
</div>
</div>
<div id='two'>
</div>

On click of a button i want div with id='oneone' in div with id='two'

 <div id='one'>
    </div>
    <div id='two'>
    <div id='oneone'>
    </div>
    </div>

How do i achieve this using JavaScript , Actually instead of div as a child element i want it to work for images

Possible duplicate of [How to move an element into another element?](http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element) — haxxxton, Jan 18 '17 at 04:39

Developer · Accepted Answer · 2017-01-18T05:50:12.793

In case you have jQuery in your project, you can use the below code:

$(document).ready(function(){

  $("#btnMove").click(function(){
  
    var $div = $("#oneone");    
    $("#two").append($div);   
    
  });
});

#one{
  border: 1px solid blue;
  height: 50px;
  width: 200px;
  }

#two{
  border: 1px solid green;
  height: 50px;
  width: 200px;
  }

#oneone{
  background-color:silver;
  height: 30px;
  width: 200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id='one'>
  <div id='oneone'>
  </div>
</div>

<div id='two'>
</div>

<input type="button" id="btnMove" value="Move container">

Using native JavaScript:

function onMoveButtonClick(){
 var divTobeMoved = document.getElementById("oneone"),
     sourceDiv = document.getElementById("one"),
     targetDiv = document.getElementById("two");

  if(sourceDiv.querySelector("#oneone") != null) {
      sourceDiv.removeChild(divTobeMoved);
      targetDiv.appendChild(divTobeMoved);
   }
 
  }

#one{
      border: 1px solid blue;
      height: 50px;
      width: 200px;
      }

    #two{
      border: 1px solid green;
      height: 50px;
      width: 200px;
      }

    #oneone{
      background-color:silver;
      height: 30px;
      width: 200px;
      }

<div id='one'>
      <div id='oneone'>
      </div>
    </div>

    <div id='two'>
    </div>
<input type="button" onclick="onMoveButtonClick()" value="Move">

@davidraj - may be you should be clear on the question what exactly you are trying to achieve. Give the image id instead of div id and the above code should work — Developer, Jan 18 '17 at 05:08
Ok will check and get back to you thanks for answering and sorry for not being specific — david raj, Jan 18 '17 at 05:09
Why use `innerHTML` when you already have a node? Just use `appendChild` instead. Using `innerHTML` will not move the node, it will delete it from one place and make a new one elsewhere, which can have other side-effects (for example, any event handlers would not survive). It will also change the identity of the node, which might matter if you use the node's identity elsewhere in code. — Amadan, Jan 18 '17 at 05:27

score 1 · Answer 2 · answered Jan 18 '17 at 05:14

Do this:

var parent = document.getElementById('one');
var oneone = document.getElementById('oneone');
var two = document.getElementById('two');
two.appendChild(parent.removeChild(oneone));

removeChild returns the deleted node, use its reference to append at desired place. Wrap it in a function and call it from any event but make sure DOM is loaded before calling this piece of code.

How to Move an element in a div into another div on trigger of an event using JavaScript?

2 Answers2