Question

我想转换

<div id="outer">
  <div id="inner"></div>
</div>

进入

<div id="outer">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>

我想保留对此之前可能已设置的div的任何引用，只需执行$（“＃outer”）。html（$（“”+ $（“＃outer”）。html（） +“”））对我不起作用。有没有比创建中间div更好的方法，将外部的所有子项移动到它然后将它附加到外部div？

Answer 1

使用.wrap() ...

$('#inner').wrap('<div id="middle"></div>');

DEMO： http://jsfiddle.net/ENmDF/

你应该注意到虽然jQuery看起来你正在使用HTML，因为它接受像'<div id="middle"></div>'之类的字符串来创建一个元素，但事实是它需要你的字符串，用它来创建DOM元素，然后将它插入DOM，将它和包裹的部分放在各自的位置。

它与DOM API中的类似......

var inner = document.getElementById('inner');
var middle = document.createElement('div');
middle.id = 'middle';

inner.parentNode.insertBefore(middle, inner);

middle.appendChild(inner);

DEMO： http://jsfiddle.net/ENmDF/1/

jQuery有另一种用于创建具有属性的元素的语法。那就是将一个对象作为第二个参数传递给$函数，所以原始代码可以像这样编写......

$('#inner').wrap($('<div>', {id:"middle"}));

DEMO： http://jsfiddle.net/ENmDF/3/

Answer 2

$("#inner")
    .wrap(
        $("<div>")
            .prop("id", "middle")
    );

工作方式与我不是我的答案相同，但是这个使用DOM来创建包装它的div元素。

注意设置;属性后缺少分号（id）。

Demo

此外，如果你喜欢它，这里是一个单行：

$("#inner").wrap($("<div>").attr("id","middle"));

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

2 个答案: