Question

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

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

对此：

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

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

Answer 1

不，没有。假设用“更长的方式”来表示用javascript移动和替换元素和文本，那就是这样做的方式，并且javascript中没有其他快捷方式。

Answer 2

你可以通过几个循环轻松地完成这个任务

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（使用控制台检查以查看反转标签）

Answer 3

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

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

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

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

使用Javascript反转DOM节点顺序

3 个答案: