jQuery創建一個新元素

這可能很不明顯，但我對jQuery非常陌生，因爲我意識到我無法永遠避免它。jQuery創建一個新元素

我需要對一個例子進行簡單的解釋，我瞭解最終結果，但我想知道每個部分的作用。

function example1 (a) { 
    var i = $('<div />').text(a).html(); 

    $('body').append('<li><strong>' + i + '</strong></li>') 
}

因此，例如創建新的元素，並將其添加到身體，你可能已經猜到最後的結局。

但是，這是我感到困惑$('<div />').text(a).html() ...我知道$('<div />')創造，而不是選擇現有的div的新元素......但是當我把這個函數的按鈕單擊它創建只是這部分<li><strong>' + i + '</strong></li> .. 。新的div創建了什麼？也爲什麼是選擇.text(a).html()的例子，當我刪除其中一個或另一個.text(a).html()這一切都搞砸了？

我希望這是有道理的，謝謝你提前:)

來源

2017-08-16 Dal

我覺得，因爲這不是一個問題應該在https://codereview.stackexchange.com/上。您可以隨時查看http://api.jquery.com瞭解用於瞭解它們的方法以及它們的功能。 – Taplar

@Taplar其實這屬於這裏，主要是因爲他想要解釋一下關於'新創建的div發生了什麼事？':) – Dekel

當函數返回時，您創建的DIV變得不可訪問，所以它是垃圾，可以由GC回收。

使用.text(a).html()的目的是將a的文本轉換爲HTML實體，以防止跨站點腳本攻擊（XSS）攻擊。 .text(a)設置DIV的文本，而不將a解釋爲HTML。然後訪問.html()獲取生成相同輸出的結果HTML。例如。如果您撥打example1('<div>')，它將設置i = '<div>'。

是不是真的需要這個臨時DIV，因爲你可以通過設置文本做同樣的事情，如果<strong>元素：

function example2(a) { 
 
    $('ul').append(
 
    $('<li>').append($('<strong>', { 
 
     text: a 
 
    })) 
 
); 
 
} 
 

 
example2("item 1"); 
 
example2("item <div> 2");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
</ul>

來源

2017-08-16 22:49:14 Barmar

謝謝，真的很有幫助，很多有用的信息:) – Dal

您剛剛創建的div因素仍然存在（而在函數內部） - 但它不是文檔的DOM的一部分（除非你使用append將其添加到DOM）。

請注意，JavaScript的垃圾收集器可能會刪除該DOM節點，因爲該函數之後將不會引用該DOM元素，因此它不再需要。

來源

2017-08-16 22:20:42 Dekel

jQuery創建一個新元素

回答

相關問題