jQuery .append（）生成亂序html元素。爲什麼？

我的HTML包含此jQuery .append（）生成亂序html元素。爲什麼？

<div id="container"></div>

，我做這在JavaScript

$("#container").append('<div>'); 
$("#container").append('<p>'); 
$("#container").append('test content'); 
$("#container").append('</p>'); 
$("#container").append('</div>');

，當它在瀏覽器中產生這個

<div id="container"> 
    <div></div> 
    <p></p> 
    "test content" 
    <p></p> 
</div>

，而不是這個

<div id="container"> 
    <div> 
    <p> 
    "test content" 
    </p> 
    </div> 
</div>

爲什麼div和p元素嚴重失序？它顯然是附加額外的</div>和</p>元素，我的代碼不會附加。爲什麼？

來源

2016-12-29 Jeff Ricks

實際上，您的代碼會追加這些元素，因爲這正是瀏覽器應該對該代碼序列執行的操作。 – Alnitak

因爲它不像構建一個字符串.... – epascarello

@epascarello正好 - 它正在構建一個DOM元素樹，一次一個 – Alnitak

的.append方法可以僅插入完整 HTML元素，而不是不完整的HTML片段。

對於未自行關閉的元素，這意味着.append('<div>')將有效地附加<div></div>。實際上，在這種情況下，.append方法根本不會追加HTML，它只會調用document.createElement('div')，然後將新創建的節點追加到指定的父節點。

生產所需內容的另一種方法是：

$('<div>').append($('<p>').text('test content')).appendTo('#container');

來源

2016-12-29 22:02:57 Alnitak

jQuery是創建結束標記是否被明確指定或不和$("#container").append('<div>');和$("#container").append('<p>');

一個節點，你需要做的是什麼或者追加到新元素中

$("#container").append('<div>'); 
$("#container div").append('<p>'); 
$("#container p").append('test content');

或者在一個語句中附加html。

$("#container").append('<div><p>test content</p></div>');

來源

2016-12-29 22:04:51 bobjoe

上面的註釋很有幫助。感謝您花時間回覆！ –

說jQuery添加結束標記是不正確的。在後臺代碼將執行'document.createElement（'div'）'，並且新創建的元素已經「關閉」。然後，如果您向_that_節點添加備註，則在HTML中它們將出現在兩個標籤之間。當您將DOM看作DOM元素的樹而不是HTML時，它應該變得更清晰。 – Alnitak

好洞察@Alnitak。我不熟悉jQuery如何完成構建DOM。謝謝你的澄清。 – bobjoe

jQuery .append（）生成亂序html元素。爲什麼？

回答

相關問題