javascript - 如何正确获取父元素的子元素并将其附加为另一个元素的子元素

标签 javascript

我有一个小型测试应用程序,我试图获取父元素的子元素并将它们作为子元素附加到另一个元素。我已经编写了一个代码来做到这一点,但事实证明它并不完美。

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>

关于javascript - 如何正确获取父元素的子元素并将其附加为另一个元素的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59678624/

相关文章:

javascript - Node.js解析时如何获取数据

javascript - 错误 : Uncaught ReferenceError: module is not defined when using module. 导出

javascript - 在firebase中同时更新多个用户

javascript - ReactJS - 循环遍历子对象并在父对象中显示前 10 个子对象

javascript - 将图像对齐到谷歌地图 div 的中心

javascript - 使用复选框或单选按钮在表单操作之间切换

javascript - 使用 formData 和 Axios 的 PATCH 请求的输入数据在 Laravel 上不可用

javascript - 这是在 promise 中嵌套异步函数的正确方法吗?

javascript - 无法获取 Ext.Component 的 el 元素

javascript - 字典键值总是返回未定义