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使用

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

另请参阅prepend()。

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()时，您无法使用实体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 的