jQuery的.append（）函數

Question

爲什麼this

$("#mydiv").append("<ul>"); 
$("#mydiv").append("<li>Hello</li>"); 
$("#mydiv").append("</ul>"); 
alert($("#mydiv").html()); 

產生

<ul></ul><li>Hello</li>

，而不是

<ul><li>Hello</li></ul>

？

謝謝！

Answer 1

因爲瀏覽器需要在每個追加之後（重新）建立自己的DOM。它不能知道結束標籤會晚些時候出現，並且開始標籤本身是無效的，因此在這種情況下糾錯將會關閉未關閉的元素。

這就是爲什麼innerHtml和依賴它的東西（如jQuery的append方法）不可靠，應儘可能避免的原因之一。

Answer 2

Append（）追加DOM節點，而不是HTML標籤（即，它是一個對象追加，而不是字符串追加）。

當您追加<ul>時，您將創建一個完整的UL節點，並且包含開始和結束標記。 </ul>調用被忽略。

Answer 3

因爲你不能附加未完成的HTML片段，所以你總是追加元素。對於你的情況，你有做任何

$("#mydiv").append("<ul></ul>"); 
$("#mydiv ul").append("<li>Hello</li>"); 

或

$("#mydiv").append("<ul><li>Hello</li></ul>");