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

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，然后将其附加到外部div？

Answer 1

使用.wrap() ...

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

演示： 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);

演示： http : //jsfiddle.net/ENmDF/1/

---

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

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

演示： http : //jsfiddle.net/ENmDF/3/

Answer 2

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

它的工作方式与我的回答不是相同，但此方法使用DOM来创建将其包装的div元素。

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

演示

另外，如果您喜欢它，这里有一条线：

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