使用 Javascript 反转 DOM 节点顺序

Question

我很好奇是否有一种简单的方法可以通过 JavaScript 进行这种转换。

<div>
  <i>
    <b>
      TEXT
    </b>
  </i>
</div>

为此：

<div>
  <b>
    <i>
      TEXT
    </i>
  </b>
</div>

现在我知道这可以通过更长的方式实现，例如创建新的  和 ，将所有旧的  放在新的  中，然后在new里面new，然后替换child，或者类似的方法。但我很好奇是否有类似 node.swapTypeWithParent 或 swapNodeTypes(b, i) 的东西

Answer 1

不，没有。假设 "longer ways" 你的意思是用 javascript 移动和替换元素和文本，那么这就是这样做的方法并且 javascript.

中没有其他快捷方式

Answer 2

这是我基于 jQuery 的解决方案。我认为它不会比这更短！

$('div>*>*').contents().unwrap();

$('div>*').wrap('');

我知道你的例子只是这个功能的演示，但我仍然觉得我们将  元素与  元素交换是微不足道的，因为结果在语义和风格上都是相同的:)

Answer 3

你可以通过几个循环很容易地做到这一点

function reverseNest(bottom_level, top_level) {
    var arr = [],
        e = bottom_level,
        f;
    while ((e = e.parentNode) && e !== top_level) {
        arr.push(e);
    }
    arr.push(bottom_level);
    e = top_level || document.documentElement;
    while (arr.length) {
        f = arr.shift();
        e.appendChild(f); // may want to use .insertBefore
        e = f;
    }
}

在这里，bottom_level 将是您的 #text 节点，top_level 将是您的 <div>

快速 DEMO（使用控制台检查以查看反向标签）

使用 Javascript 反转 DOM 节点顺序

Reverse DOM node order with Javascript

javascript

dom

language-features