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() method：

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

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

2 个答案: