JavaScript/jQuery : how to get HTML and display HTML, 包括标签

Question

我正在使用 jQuery，并且有一个 HTML block 如下:

   <div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
    </div>

呈现为:

标题 1

标题 2

标题 3

我想做的是展示用什么 HTML 来创建这个 block 。

如果我使用 $(this).clone().insertAfter(this); 只是重复我们看到的渲染内容，但我真正想在浏览器中看到的是:

<div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
 </div>

执行此操作的最佳方法是什么？

Answer 1

您需要做的是在输出 HTML 之前对 HTML 进行转义，这样浏览器就不会呈现其中包含的标签。

您可以像这样使用 jQuery 轻松转义 HTML:

var escapedHtml = $('<div />').text($('#html-block').html());

现在你有一个包含 <div id="html-block>> 的字符串，你可以将它输出到浏览器:

$('#html-block').after($('<pre />').html(escapedHtml));

你可以做到这一点:

var $htmlBlock = $('#html-block');
$('<pre />').text($htmlBlock.html()).insertAfter($htmlBlock);