JavaScript/jQuery:如何获取HTML并显示HTML,包括标签

Question

我正在使用jQuery,并有一个HTML块如下:

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

其呈现为:

标题1

标题2

标题3

我要做的是显示用于创建此块的HTML.

如果我使用 $(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);