使用Javascript反向DOM节点订单

我很好奇，如果有一种简单的方法可以用JavaScript进行这种转换。使用Javascript反向DOM节点订单

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

要这样：

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

现在我知道，这是有可能在较长的方式，如创建一个新的和，将所有的旧新内，然后新在新的里面，然后更换孩子，或者类似的方法。但我很好奇，如果有像node.swapTypeWithParent或swapNodeTypes(b, i)。

来源

2015-01-01 David

不过，我不认为这是有意义的。因为元素嵌套有许多约束 - 简单地“反转”有效的dom树可能会导致无效。 – Leo

将文本节点附加到'i'节点，将'b'节点附加到'div'，将'i'附加到'b'--这个节点的大小尽可能短，而不创建任何新节点。 http://jsfiddle.net/p49shh43/ – CBroe

不，没有。用“更长的路径”来表示，你的意思是用javascript来移动和替换元素和文本，然后这就是实现它的方法，并且在JavaScript中没有其他快捷方式。

来源

2015-01-01 01:46:37 Rob

-1

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

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

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

我知道你的例子仅仅是此功能的演示，但我仍然觉得微不足道，我们正在交换元素与元素，因为其结果将是相同的语义和文体:)

来源

2015-01-01 02:51:23

你可以用一对夫妇这样做很容易地循环

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（与控制台检查，看看逆转标签）

来源

2015-01-01 03:29:31

使用Javascript反向DOM节点订单

回答

相关问题