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