“剪切和粘贴” - 使用 Javascript 在 DOM 中移动节点答案

【问题标题】："Cut and Paste" - moving nodes in the DOM with Javascript“剪切和粘贴” - 使用 Javascript 在 DOM 中移动节点
【发布时间】：2010-09-24 08:52:33
【问题描述】：

我的 html 代码大致如下所示：

<div id="id1">
  <div id="id2">
    <p>some html</p>
    <span>maybe some more</span>
  </div>
  <div id="id3">
    <p>different text here</p>
    <input type="text">
    <span>maybe even a form item</span>
  </div>
</div>

显然，它的意义远不止于此，但这是基本思想。我需要做的是切换#id2和#id3的位置，所以结果是：

<div id="id1">
  <div id="id3">...</div>
  <div id="id2">...</div>
</div>

有没有人知道可以读写两个节点（及其所有子节点）以交换它们在 DOM 中的位置的函数（我确定我不是第一个需要此功能的人）？

【问题讨论】：

标签： javascript dom

【解决方案1】：

你可以使用 insertAdjacentElement 而不是 appendChild 可以更好地控制元素相对于目标元素的位置。

语法：targetElement.insertAdjacentElement(position, element)。它有四个位置代码：

'beforebegin'：在 targetElement 本身之前。
'afterbegin'：就在 targetElement 内部，在它的第一个子元素之前。
'beforeend'：就在 targetElement 内部，在其最后一个子元素之后。
'afterend'：在 targetElement 本身之后。

它显示为：

//beforebegin
<p>
  //afterbegin
  foo
  //beforeend
</p>
//afterend

在您的情况下，您可以将代码编写为：

document.getElementById('id2').insertAdjacentElement('beforebegin', document.getElementById('id3'));

注意这种方式，你不需要引用父（容器）元素！

还要考虑你有比 id2、id3 更多的元素，例如：id4、id5、id6。现在，如果你想在 id2 之后重新定位例如 id5，它很简单：

function changePosition() {
   document.getElementById('id2').insertAdjacentElement('afterend', document.getElementById('id5'));
}

<div id='container'>
  <div id='id1'>id1</div>
  <div id='id2'><u>id2</u></div>  
  <div id='id3'>id3</div>  
  <div id='id4'>id4</div>  
  <div id='id5'><b>id5</b></div>  
  <div id='id6'>id6</div>  
</div>

<p><input type='button' onclick="changePosition()" value="change position"></p>

【讨论】：

【解决方案2】：

在这种情况下，document.getElementById('id1').appendChild(document.getElementById('id2')); 应该可以解决问题。

更一般的你可以使用insertBefore()。

【讨论】：

.prepend() 可能也是一些人正在寻找的。这是a short list 更多有用的方法。

【解决方案3】：

这个函数接受传入的任何节点，并用给定的标签包装它。在示例代码 sn-p 中，我将 span 标签与 section 标签包装在一起。

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}
let toWrap = document.querySelector("#hi");
wrap(toWrap, "section");
console.log(document.querySelector("section > #hi"), " section wrapped element");

&lt;span id="hi"&gt;hello there!&lt;/span&gt;

【讨论】：