javascript - 使用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 更好的方法？

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/