防止html代码被执行

【问题标题】：prevent html code from being executed防止html代码被执行
【发布时间】：2015-12-11 01:10:21
【问题描述】：

我正在制作一个网页，并且我有一些用于倒数计时器的 JavaScript 代码。在计时器下方，我想向人们展示项目的代码，而不是强迫他们打开开发者工具，所以我做了以下操作：

<body onload="show()">
    <span id="showCode">
        <!-- where I want my code to show -->
    </span>
    <script>

    function show() {
        document.getElementById('showCode').innerHTML = document.body.innerHTML;
    }

    </script>
</body>

如何使用 javascript 显示元素的内部 html 而不是执行代码？

【问题讨论】：

你有什么问题？
我会用实际问题更新问题
使用
我刚刚把<span>标签改成了<xmp>标签，效果很好。

标签： javascript html

【解决方案1】：

“您需要将 < 和 > 字符转换为 HTML 实体，如下所示：”

<pre class="prettyprint">
  &lt;script&gt;
    $(document).ready(function(){
      setTimeout(function(){
        console.log('deleting cookie');
        $.cookie('cookie',null,{domain: document.domain});
      },1000);
    });
  &lt;/script&gt;
</pre>

“除了现有的<pre> 标签之外，我还建议将代码包装在<code> 标签中。”

~Travis

Display javascript as code snippet

【讨论】：

我不确定这是否适合您，或者您是否想要做更多事情，那么只需显示倒计时代码。
它适用于我现在正在做的事情，但我不想将此代码用于其他目的。我不能将元素的 innerHTML 设置为字符串。这对于显示网页当前代码的网页构建器之类的东西很有用。