我可以使用 Jquery 获取元素的 HTML 源代码吗？ [复制]

Posted 2023-05-07

【中文标题】我可以使用 Jquery 获取元素的 HTML 源代码吗？ [复制]

【英文标题】：Can I get the HTML source of an element with Jquery? [duplicate]

【发布时间】：2013-11-16 07:00:58

【问题描述】：

我敢肯定，这是一个奇怪的请求，但是给定一个 Jquery 选择器，我可以获取一个项目（及其子项）的原始 html，以便我可以重新放回该 HTML 的转义版本页面？

我很高兴进行转义，我只是不知道如何从对象返回 HTML。

如果也有一种简单的 DOM 标准方法可以做到这一点，我也很高兴。

---

编辑以解决“哦，你为什么不只是谷歌那个”：谷歌它。您将获得 Jquery 的.html()，这将为您提供对象的内部 HTML。例如，假设您有：

<div id="pants">naughty bits</div>

.html() 只会返回naughty bits。而我正在寻找的输出是<div id="pants">naughty bits</div>

【问题讨论】：

我不相信仅仅通过谷歌搜索就不会为您提供解决方案......

您无法获得原始源代码——但是，使用html() 您可以获得浏览器的 DOM 呈现的 HTML 格式的源代码。

根据 Archer 的回答，这并不像 .html() 那样简单，如果您使用 Google，这是。我在我的问题中包含了一个示例来解释为什么它不是答案以及为什么我不是一个完整的 Hodor。

【参考方案1】：

如果你有身份证，那么你可以这样做......

jQuery

$("#ID")[0].outerHTML;

纯 Javascript

document.getElementById("ID").outerHTML;

使用.html()只会获取内部html，不会包含你通过ID指定的元素。

更新

现在还有一个 jQuery 方法来获取元素的外部 HTML...

$("#ID").outerHTML();

【讨论】：

+1 表示外部/内部区别 ;)

【参考方案2】：

是的，jquery 的 html() 方法以字符串形式返回所有标签的 html 数据： 示例：

HTML 源代码

<div id="DivId">
    <p> This is html concept </p>
    <br/>
    <p> This is jquery concept. </p>
</div>

Jquery 代码

var htmlString=$("#DivId").html();

返回结果是： html字符串：

    <p> This is html concept </p>
    <br/>
    <p> This is jquery concept. </p>

【参考方案3】：

是的，它可能使用html()

var source=$('#ID').html()

【参考方案4】：

给定一个 Jquery 选择器，我可以得到一个项目（及其子项）的原始 HTML

使用.html()方法获取值：

var htmlOutput = $('#myselector').html();

...这样我就可以在页面上放回该 HTML 的转义版本？

使用.text()方法将字符串设置为纯文本：

$('#anotherselector').text(htmlOutput);

（即 jQuery 会为您完全转义它；您无需手动执行）

【讨论】：

正如其他人指出的那样，.html()（和文本）仅适用于内部 HTML。它不会包含我正在谈论的元素（这也是我想要的）。

@Oli .text()这里是作为setter使用的，所以真的和outer/innerHTML的区别没有关系。

@Oli - 不用担心； Archer已经给了你一个很好的答案，所以我不会重复他已经说过的话。我发布我的答案主要是为了证明您不需要使用.text() 进行任何转义；其他答案都没有，所以我觉得我应该添加一些东西。