[英]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.