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

我想转换

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

进入

我希望保留在此之前设置的对div的任何引用，因此仅执行$outer.html$+$outer.html+对我来说不起作用。有没有比创建中间div、将outer的所有子级移动到该div，然后将其附加到outer div更好的方法呢？

使用

演示：

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

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

演示：

使用

演示：

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

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

---

演示：

Wow，我不知道创建属性元素的替代方法。美好的这显然是正确的答案，但我意识到我的例子太简单了，因为我不能使用wrap，我不这么认为？你会考虑回答吗？哇，我不知道用这种方法来创建具有属性的元素。美好的这显然是正确的答案，但我意识到我的例子太简单了，因为我不能使用wrap，我不这么认为？你会考虑回答吗？

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

inner.parentNode.insertBefore(middle, inner);

middle.appendChild(inner);

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

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

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