使用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"));