如何使用JavaScript在事件觸發時將div中的元素移動到另一個div中？

Question

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

單擊按鈕時，我希望id為“ two”的div中的id為“ oneone”的div

 <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。