如何让 html 在页面上显示而不是运行？ [复制]答案

【问题标题】：How to do i get html to display on page instead of running? [duplicate]如何让 html 在页面上显示而不是运行？ [复制]
【发布时间】：2017-03-21 12:33:52
【问题描述】：

我的问题似乎与大多数人的问题相反。我不希望 .innerHTML 中的 HTML 运行。我希望它按原样显示在页面上。（我知道我的代码中还有另一个问题。我正在努力）

https://jsfiddle.net/ojfykv17/ 或

<div id="code">

</div>

    function genorateCode() {
    		var account = document.getElementById("account");
        var url = document.getElementById("url");
        sendCode();
    }
    function sendCode() {
    document.getElementById('code').innerHTML = '<a href="'+url+'">'+'<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@'+account+'</div></a>';
    }
    sendCode();

    .button {
    border-radius: 5px;
    background-color: white;
    border:1;
    border-style: solid;
    position: fixed;
    padding: 5px 10px 5px 10px;
    border-width: 1.2px;
    line-height: 5px; 
    border-color: #a5aab1;
    font-family: 'Lato', sans-serif;
    font-weight:300;
    text-align: center;
    }

<form id="form" onsubmit="return false;">
        <input type="text" id="account" />
        <input type="text" id="url" />
        <input type="submit" onclick="genorateCode();" />
    </form>
    
    <div id="code">
    
    </div>

【问题讨论】：

你不想让它运行是什么意思？您的意思是您希望它实际显示标记标签吗？如果是这样，请参阅：stackoverflow.com/questions/2820453/display-html-code-in-html
这是一个使用<textarea>的工作版本：jsfiddle.net/nq5qLvwu
@IanEmnace - 我认为你可以替换为“解释” - 如 “我不希望 .innerHTML 中的 HTML 被解释”。

标签： javascript jquery html css innerhtml

【解决方案1】：

设置元素的innerText，而不是设置innerHTML。

document.getElementById('code').innerText = '<a href="'+url+ ...

【讨论】：

browser support 上的强制性说明。还要检查链接的article。
这是一篇好文章，我建议任何找到此答案的人阅读它！

【解决方案2】：

您需要将所有 HTML 标记从 &lt; 和 &gt; 转换为 &lt; 和 &gt;。否则浏览器会将其呈现为 HTML。

【讨论】：

如果&lt; 已经转义，则不需要转义&gt;。

【解决方案3】：

在您的代码中有几件事需要编辑。第一个函数具有局部变量account 和url，然后您在第二个函数中访问它，这当然不在它的范围内。

var account,url;

function genorateCode() {
  // are you sure you want this document.getElementById("account")
  // instead if this -> document.getElementById("account").value ???
  account = document.getElementById("account").value;
  url = document.getElementById("url").value;
  sendCode();
}

在您的情况下，您可以使用 insertAdjacentHTML，如下所示：

function sendCode() {  
  var str = '<a href="' + url + '">' + '<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@' + account + '</div></a>';
  document.getElementById('code').insertAdjacentHTML('beforeend', str);
}

DEMO

【讨论】：