使用jQuery在祖先和多个后代之间插入元素

我想转换

成

我想保留对此之前可能已设置的内部div的任何引用，只需执行$("#outer").html($("

" + $("#outer").html() + "

"))对我不起作用。

有没有比创建中间div更好的方法，将外部的所有子项移动到它然后将它附加到外部div？

Answer 1

像这样…

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

演示： http ： //jsfiddle.net/uy6wg/

---

.wrapInner()方法将把.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); 

演示： http ： //jsfiddle.net/uy6wg/1/

---

这可以成为一个可重复使用的function……

 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"; 

演示： http ： //jsfiddle.net/uy6wg/2/

Answer 2

您可以使用.wrapAll()方法 ：

 $("#outer > div").wrapAll('
');