如何使用jQuery从DOM元素创建javascript变量

Question

假设我的页面上有以下DOM元素：

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

Q1:使用jQuery的，如何将#name的内容转换为JS变量，以便在DOM上的其他地方重用它？

Q2: --使用jQuery将JS变量呈现到HTML中的最佳方法是什么？更进一步，如果我想删除元素的内容，那么用变量替换它

Answer 1

若要将"Sharon“保存在变量中，请使用html()

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

若要将其呈现到其他地方(替换之前HTML标记中的任何内容)：

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

或者，在# 追加标记中的任何内容之后使用

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

还可以看看前额()。

Answer 2

Q1:您只需使用.html()就可以获得HTML

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

如果只查找文本(不使用样式)，则使用.text()函数：

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

Q2:为.html()函数设置参数，设置目标元素的HTML：

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

同样，如果只设置文本，则在我的代码中将.html()替换为.text()。

Answer 3

我明白你的意思。使用.html()，您只需要获得所选元素内部的字符串，当您选择带有jQuery或jQuery的元素，然后是.html()时，您就不能将事件或类似的东西绑定到solid 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