如何移动 body 中的所有元素，并为某些元素添加例外而不移动？

Question

我觉得标题很清楚，但是我有一些例子给你们，这是我的想法：

我有这个Html5:

<html>
<head></head>
<body class="oldParent">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="NewParent"></div>
</body>
</html>

如您所见，我的新父母是我的旧父母child

（我想移动除 NewParent 之外的所有 body 元素），我需要移动除此元素之外的所有元素：

<div class="**NewParent**"></div>

我是 Javascript 的新手，我认为你们知道如何添加例外为此，我也发现了这个：

var newParent = document.getElementById('NewParent');
        var oldParent = document.getElementById('OldParent');

while (oldParent.childNodes.length > 0) {
    newParent.appendChild(oldParent.childNodes[0]);
}

但我不知道如何添加例外！？

我需要帮助:(

Answer 1

您可以试试下面的方法

获取要保留的当前元素。
创建该元素的克隆。
清空整个父元素。
附加您之前克隆的元素。

var newParent = document.getElementsByClassName('NewParent')[0];
var cln = newParent.cloneNode(true);
document.getElementsByClassName('oldParent')[0].innerHTML = '';
document.getElementsByClassName('oldParent')[0].appendChild(cln);

<html>
  <head></head>
  <body class="oldParent">
    <div class="p1">1</div>
    <div class="p2">2</div>
    <div class="p3">3</div>
    <div class="p4"5></div>
    <div class="p5">5</div>
    <div class="NewParent">77</div>
  </body>
</html>

Answer 2

您已经非常接近您的原始代码了。只需切换到 getElementsByClassName - 但请注意它 returns 一个集合，因此您必须对其进行索引。如果这是一个选项，您可能想切换到 id。

然后您基本上可以添加一个 if 条件来测试要排除的元素的 class名称：

var newParent = document.getElementsByClassName('NewParent')[0];
var oldParent = document.getElementsByClassName('oldParent')[0];

while (oldParent.childNodes.length > 0) {
  if (oldParent.childNodes[0].className !== 'NewParent') {
    newParent.appendChild(oldParent.childNodes[0]);
  }
  else { break; }
}

这里有一个 jsfiddle 你可以玩。请注意您的 class 名称，新旧 parent 名称的大小写不同。

我想补充一点，虽然这最接近您的原始代码，但它实际上可能不是解决此问题的最佳方法。这假设您的新 parent 是集合中的最后一个，因为由于您的循环方式，它必须跳出您的 while 循环。如其他答案所示，克隆可能是更安全的解决方案。

如何移动 body 中的所有元素，并为某些元素添加例外而不移动？

How to move All elements in the body with adding exception for some elements to not be moved?

html

javascript

appendchild