如何使用jQuery從DOM元素創建JavaScript變量

Question

假設我的頁面上有以下DOM元素：

<div id="name">Sharon</div>

問題1：如何使用jQuery將#name的內容轉換為JS變量，以便可以在DOM的其他位置重用它？

問題2：使用jQuery將JS變量呈現到HTML中的最佳方法是什么？ 更進一步，如果我想刪除元素的內容，然后用變量替換它，那么最好的方法是什么？

Answer 1

要將“ Sharon”保存在變量中，請使用html（） ：

var content = $('#name').html();

要將其呈現到其他位置（替換之前該HTML標記中的所有內容）：

$('#example').html(content);

或者，要將其附加在#example標記中的任何內容之后，請使用

$('#example').append(content);

還要看看prepend（） 。

Answer 2

Q1：您可以使用.html()獲得HTML：

var content = $('#name').html();

如果您僅查找文本（無樣式），請改用.text()函數：

var content = $('#name').text();

問題2：為.html()函數設置參數會設置該目標元素的HTML：

$('#otherName').html('I am the <i>new</i> content');

同樣，如果僅設置文本，請在我的代碼中將.html()替換為.text() 。

Answer 3

我明白你的意思。 使用.html()您只會得到所選元素內部的字符串，並且當您使用jQuery或jQuery然后選擇.html()時，您無法將事件或諸如此類的東西與固態JavaScript綁定在一起。

當您為jQuery選擇器定義變量時，它與您使用固態JavaScript定義的變量不相等。

$('body') == document.getElementsByTagName('body')[0]
//false

使用.html()無法解決您的問題：

('body').html() == document.getElementsByTagName('body')[0]
//false

.html()給您一個等於元素內部的字符串：

$('body').html() == document.getElementsByTagName('body')[0].innerHTML.toString()
//true

事實是，jQuery選擇器始終返回一個數組，其中包含與給定查詢事件匹配的每個元素，如果您的查詢返回一個元素，它將返回一個包含一個元素的數組。 因此，通過選擇每個jQuery選擇器數組的任何元素，您將獲得一個實際的DOM元素。

$('body')[0] == document.getElementsByTagName('body')[0]

在您的瀏覽器開發人員工具中嘗試一下以查看結果！ ：D