Обратный порядок узлов DOM с Javascript

Question

Мне любопытно, есть ли простой способ сделать этот переход с JavaScript.

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

Для этого:

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

Теперь я знаю, что это возможно в более длительных отношениях, как создание нового <b> и <i>, размещая все старые <b> внутри нового <i>, а затем новый <i> внутри нового <b>, а затем заменить ребенка или аналогичный метод. Но мне любопытно, есть ли что-то вроде node.swapTypeWithParent или swapNodeTypes(b, i).

Answer 1

Нет, не существует. Предполагая «более длинными способами» вы подразумеваете перемещение и замену элементов и текста на javascript, тогда это способ сделать это, и в javascript нет других ярлыков.

Answer 2

Вот мое решение на основе jQuery. Я думаю, что это не будет короче этого!

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

$('div>*').wrap('<b></b>');

Я знаю, что ваш пример просто демо для этой функции, но я все еще нахожу это тривиально, что мы обменивать <i> элементы с <b> элементами, так как результат будет таким же семантически и стилистически :)

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 (осмотр с консолью, чтобы увидеть перевернутые тег)