Question

我的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中交换它们的位置？

Answer 1

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

更一般地说，您可以使用insertBefore()。

Answer 2

此函数接受传递给它的任何节点，并使用给定的标记对其进行包装。在示例代码段中，我使用section标签包装了span标记。

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

＆＃13;

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");

＆＃13;

<span id="hi">hello there!</span>

＆＃13;

Answer 3

你可以使用 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>

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

3 个答案: