Вставить элемент между предком и несколькими потомками, используя jQuery

Question

Я хотел бы преобразовать

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>

в

<div id="outer">
  <div id="middle">
    <div id="inner1"></div>
    <div id="inner2"></div>
  </div>
</div>

Я хотел бы сохранить любые ссылки на внутренние div, которые могли быть установлены до этого, поэтому просто делаю $("#outer").html($("<div id='middle>" + $("#outer").html() + "</div>")) не будет работать для меня.

Есть ли лучший способ, чем просто создать средний div, переместить всех дочерних элементов в него и затем добавить его во внешний div?

Answer 1

Как это ...

$('#outer').wrapInner($('<div>',{id:'middle'}));

DEMO: http://jsfiddle.net/uy6wg/

---

.wrapInner() метод обернет все содержимое #outer в элемент, который вы ему дадите.

Сюда войдут внутренние текстовые узлы, если ваш фактический контент содержит их.заботиться о производительности, вот собственное решение DOM ...

var outer = document.getElementById('outer'),
    middle = document.createElement('div');

middle.id = 'middle';

while(outer.firstChild)
    middle.appendChild(outer.firstChild);

outer.appendChild(middle);

DEMO: http://jsfiddle.net/uy6wg/1/

---

Это может бытьпревращается в функцию многократного использования ...

function wrapInner(id, tag) {
    var outer = document.getElementById(id),
        wrapper = document.createElement(tag);

    while(outer.firstChild)
        wrapper.appendChild(outer.firstChild);

    outer.appendChild(wrapper);
    return wrapper;
}

wrapInner('outer','div').id = "middle";

DEMO: http://jsfiddle.net/uy6wg/2/

Answer 2

Вы можете использовать метод .wrapAll() :

$("#outer > div").wrapAll('<div id="middle"></div>');