使用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節點訂單

回答

相關問題