JQuery的：插入到新創建的元素

Question

我有這樣的代碼（運行的jQuery 1.4.2）

var elementToAdd = $('<h3>').html('header'); 
var p = $('<p>').html('hello world'); 
elementToAdd.after(p); 
$('div#content').append(elementToAdd); 

然而，輸出

<div id="content"> 
    <h3>header</h3> 
</div> 

該段未添加的 「Hello world」。

我在做什麼錯？

---

我一直在嘗試了一些變化：

這不起作用或者：

var elementToAdd = $('<div>Header</div>'); 
var p = $('<p>hello world</p>'); 
elementToAdd.after(p); 

或本：

var elementToAdd = $('<h3>header</h3>').after('<p>hello world</p>'); 

但這個工程（在Firefox，在最少）：

var elementToAdd = $('<div>').after('<h3>header</h3>').after('<p>hello world</p>'); 

爲什麼？

Answer 1

編輯：修改原來的設置，你可以將.push()一個DOM元素（不是一個jQuery對象）放入集合中。

var elementToAdd = $('<h3>').html('header'); 
var p = $('<p>').html('hello world'); 

    // Push the DOM element in 
elementToAdd.push(p[0]); // [0] gets the DOM element at index 0 
$('div#container').append(elementToAdd);​ 

---

代替.after()，使用jQuery的.add()方法。

var elementToAdd = $('<h3>').html('header'); 
var p = $('<p>').html('hello world'); 

// Add the new object ----------------v 
$('div#container').append(elementToAdd.add(p));​ 

這會將它追加爲你想要的兄弟姐妹。

它返回一個新的jQuery對象，其中包含兩個元素作爲同輩。因爲它不會修改原始對象，所以您需要在.append()中調用它或將結果存儲在要附加的變量中。

---

編輯：（正如另一個答案指出，現在可以使用after()像add()，在它返回一組新的，不修改原始。）

要解釋爲什麼呢，這是因爲一個jQuery對象是一個DOM元素的數組。 DOM元素可以是具有嵌套後代的單個元素，但不能是兩個兄弟。因此，當您執行.after()時，您正嘗試向陣列中的每個單個元素添加一個同級元素到。

爲了處理兄弟姐妹，jQuery將它們作爲附加項存儲在其數組中。

所以，當你通過傳遞兩個或更多的兄弟元素來創建一個jQuery對象時，它將它們分開，並使它們在數組中分開。

var $obj = $("<div>div element</div> <span>span element</span>"); 

這將爲您提供一個jQuery對象，其中包含2個項目的數組。

$obj[0] is the <div> element 
$obj[1] is the <span> element 

所以，如果你是單獨創建它們，你需要使用.add()新項目添加到陣列。

var $obj = $("<div>div element</div>"); 

$obj[0] is the <div> 

var $span = $("<span>span element</span>"); 
$obj = $obj.add($span); 

$obj[0] is the <div> 
$obj[1] is the <span> 

Answer 2

我不認爲.after作品有沒有被添加到DOM元素還...

試試這個

var elementToAdd = $('<h3>').html('header'); 
var p = $('<p>').html('hello world'); 
$('div#content').append(elementToAdd); 
elementToAdd.after(p); 

編輯：是的，這工作好了！ http://jsfiddle.net/tu2GY/

編輯2：好吧，我在此不是非常好，但在這裏不用...

由於@Extrakun指出，jQuery的文檔確實指出，該元素可能無法連接到DOM ...

對於jQuery 1.4，.before()和.after()也將斷開連接的DOM節點工作。

所以，我深吸了一口氣，打開jQuery的1.4.2.js（在vim：d）以及我發現的是，無論是被傳遞到.after有沒有parentNode一個元素，正在用作選擇器字符串我認爲在傳遞jQuery對象時失敗。我會嘗試後我的意思在一分鐘內 或兩個 這裏的一些代碼...（內pushStack法）

ret.selector = this.selector + "." + name + "(" + selector + ")"; 

的selector這裏是結束是不管你傳遞給.after。那之後並沒有真正發揮出色。

Answer 3

'elementToAdd'不是指向元素的jQuery對象。試試這個：

var elementToAdd = $('<h3>'); 
elementToAdd.html('header'); 
var p = $('<p>').html('hello world'); 
$('div#content').append(elementToAdd); 
elementToAdd.after(p); 

Answer 4

操縱DOM是一個昂貴的操作，並盡最大努力去做的最低次數，你上面的代碼可以很容易地改變，

$('div#content').append('<h3>header</h3><p>hello world</p>'); 

Answer 5

有趣。添加一個臨時工程：

var e = $('<h3>').html('header'); 
var p = $('<p>').html('hello world'); 
var result = e.after(p); 
$('div#content').append(result); 

...所以我猜e.after(p)回報 「E後P」，但不實際更改即所以它在一個鏈中工作，並且它的工作是斷開的，但不會像你期望的那樣工作。

Answer 6

問題是，插入斷開的DOM節點與.before和.after只適用於jQuery 1.4（和衍生物）。

<script src="jquery-1.4.js"></script> 
<script> 
    $('<div/>').after('<p>Test</p>').filter('p').appendTo('body'); 
</script> 

Answer 7

對於所有最近的jQuery的版本，你也可以使用將追加用於插入DOM節點的對象：

<script> 
    $("<span/>", { 
    class: "test", 
    html: "<p><b>Click me!</b></p>" 
    }).appendTo("body"); 
</script>