如何在网页上显示HTML片段，而不需要将每个<替换为<>和>?
换句话说，是否有一个标记表示在点击结束标记之前不呈现HTML ?
当前回答
行之有效的HTML方法:
将&字符替换为& 将<字符替换为< 将>字符替换为> 可以选择用<pre>和/或<code>标记包围HTML示例。
其他回答
JavaScript字符串文字可以用于跨多行编写HTML。显然，这个解决方案需要JavaScript，特别是ECMA6。
.createTextNode with CSS white-space: pre-wrap;很管用。
. innertext单独也可以。运行下面的代码片段。
let codeBlock = ` <!DOCTYPE HTML> <html lang="en"> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>I like cars and lorries and have a big Jeep!</p> <h2>Where I live</h2> <p>I live in a small hut on a mountain!</p> </body> </html> ` const codeElement = document.querySelector("#a"); let textNode = document.createTextNode(codeBlock); codeElement.appendChild(textNode); const divElement = document.querySelector("#b"); divElement.innerText = codeBlock; #a { white-space: pre-wrap; } <div id=a> </div> <div id=b> </div>
如果您正在寻找与框架一起工作的解决方案。
const code = `
<div>
this will work in react
<div>
`
<pre>
<code>{code}</code>
</pre>
你可以用css给它一个漂亮的外观:
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}
行之有效的HTML方法:
将&字符替换为& 将<字符替换为< 将>字符替换为> 可以选择用<pre>和/或<code>标记包围HTML示例。
它可能并不适用于所有情况，但将代码片段放在文本区域内将它们显示为代码。
如果你不想让它看起来像一个实际的文本区域，你可以用CSS样式文本区域。
下面是几个答案的组合:
函数c(s) { 返回s.split(“& lt;”). join(“<”).split(“在”). join(“>”).split (", ") . join(“&”) ｝ displayMe。innerHTML = ok.innerHTML; console.log ( c (ok.innerHTML) ) <textarea style="display:none" id="ok"> <脚本> console.log(“hello”,5和9); > < /脚本 textarea > < / < div id = " displayMe " > < / div >
