如何使用JavaScript在事件触发器中将div中的元素移动到另一个div？

Question

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

点击一个按钮，我希望div中id ='oneone'在div中id ='two'

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

我如何使用JavaScript实现这一目标， 实际上，而不是div作为子元素，我希望它为图像工作

Answer 1

如果项目中有jQuery，可以使用以下代码：

$(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">

使用原生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">

Answer 2

这样做：

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

removeChild返回已删除的节点，使用其引用在所需位置追加。  将它包装在一个函数中并从任何事件中调用它，但在调用这段代码之前确保已加载DOM。