[英]How can I properly take the children of a parent element and append it as the children of another
我有一個小型測試應用程序，我試圖獲取父元素的子元素並將它們作為子元素附加到另一個元素。 我已經寫了一個代碼來做到這一點，但結果並不完美。
function run() { var elems = document.getElementById('happy').children; for (i = 0; i < elems.length; i++) { document.getElementById('enabled').appendChild(elems[i]) } }
body { padding: 30px 30px 30px 30px; }
<h2>The Button Element</h2> <div id="happy"> <span>Hello!</span> <span>Sad!</span> <span>Click me!</span> <span>Try me!</span> </div> <div id="enabled"> <button type="button" onclick="run()">Click me!</button> </div>
當“點擊我！” 按鈕被點擊，來自“你好！”、“悲傷！”、“點擊我！”、“試試我！” 只有“你好！” 和“點擊我！” 移動。 為了讓其他人移動“點擊我！” 按鈕必須多次點擊。
我希望它們都在第一次點擊時移動，我該如何解決這個問題？
循環計數器將不起作用，因為elems數組在循環的每次迭代中變得越來越小。 這將始終只附加一半的子元素。
function run() { var elems = document.getElementById('happy').children; while (elems.length > 0) { document.getElementById('enabled').appendChild(elems[0]) } }
<!DOCTYPE html> <html> <body style="padding: 30px 30px 30px 30px;"> <h2>The Button Element</h2> <div id="happy"> <span>Hello</span> <span>Sad</span> <span>Click Me!</span> <span>try Me!</span> </div> <div id="enabled"> <button type="button" onclick="run()">Click Me!</button> </div> </body> </html>
如果您不想使用循環，您可以執行以下操作：
function run() { var enabledDiv = document.getElementById('enabled'); var happyDiv = document.getElementById('happy'); enabledDiv.innerHTML += happyDiv.innerHTML; happyDiv.innerHTML = ""; }
<!DOCTYPE html> <html> <body style="padding: 30px 30px 30px 30px;"> <h2>The Button Element</h2> <div id="happy"> <span>Hello</span> <span>Sad</span> <span>Click Me!</span> <span>try Me!</span> </div> <div id="enabled"> <button type="button" onclick="run()">Click Me!</button> </div> </body> </html>
您可以使用Range API 選擇第一個節點的內容，然后將其提取到DocumentFragment 。 最后，您只需將此片段附加到您的目標元素：
document.getElementById('btn').addEventListener('click', function() { const source = document.getElementById('happy'); const target = document.getElementById('enabled'); const range = document.createRange(); range.selectNodeContents(source); const content = range.extractContents(); target.append(content); }, {once: true});
#happy { color: green; border: 1px solid } #enabled { color: red; border: 1px solid }
<h2>The Button Element</h2> <div id="happy"> <span>Hello</span> <span>Sad</span> <span>Click Me!</span> <span>try Me!</span> </div> <div id="enabled"> <button type="button" id="btn">Click Me!</button> </div>
如何使用jQuery附加元素，所有子元素以及父和子元素的所有類
[英]How to append an element, all its children, and all classes of the parent and children with jQuery
如何使用 JavaScript 將所有 HTML 元素子元素移動到另一個父元素？
[英]How to move all HTML element children to another parent using JavaScript?
如何選擇父元素以及所有非第一個子div以及父母及其子女的兄弟姐妹
[英]How can I select a parent element, and all child divs that are not the first, as well as siblings of the parents and their children
如何防止父元素事件從子事件中的代碼執行
[英]How can I prevent parent element event execution from code inside children event
如何從父元素中刪除所有子元素（但 2 個）並將 append 刪除到新的子元素？
[英]How to remove all children (but 2) from a parent element and append it to a new child element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.