将jQuery节点转义为文本，以便HTML代码可见

Escape jQuery node into text so that HTML code is visible

本文关键字：HTML 以便 代码 文本 jQuery 节点 转义      更新时间：2024-06-13

我正在尝试将HTML输出到屏幕（而不是渲染它）。例如，给定以下内容：

<div></div>
<button>escape</button>
<pre><code></code></pre>

使用jQuery创建一些动态HTML：

$('div').html('<p>lorem</p>');
$('button').on('click',function () {
    $('code').text($('div'));
});

有没有显示的方法：

<div><p>lorem</p></div>

而不是我所看到的：

[object Object]

小提琴这里

您可以使用outerHTML属性：

$('button').on('click',function () {
    $('code').text($('div').prop('outerHTML'));
});

请注意，这将只返回选择器返回的第一个div的outerHTML（或任何其他选定的属性/属性）。

参考文献：

  • JavaScript：
    • Element.outerHTML
  • jQuery：
    • prop()
相关文章：