禁止从另一个模板文字中的模板文字渲染 html

Question

我想在另一个模板文字中显示一些位于模板文字中的 html 代码。

我正在使用<pre><code>标签来尝试这个。

我目前遇到的问题是浏览器呈现 html 而不是它的代码。 例如，它显示一个实际的输入框而不是显示代码，例如<input ...

我想将一些使用 javascript 的可逆过程应用于templateliteral变量，以便按字面显示 html（它应该在下面的代码段中以黑色文本显示所有橙色），以便可以轻松取回原始代码。

这样做的好方法是什么？

这是问题的一个示例（它应该在黑色文本上显示所有橙色）：

 let templateliteral = `let inner = { content : \\` <style> #exampleDivInTemplateLiteral { background-color:lightblue;color:white; } </style> <div id="exampleDivInTemplateLiteral"> <b>this is some text.</b> <input id="exampleInput" placeholder="example input">\\</input> </div>\\`}` document.getElementById("exampleDiv").innerHTML = '<pre><code>' + templateliteral + '<pre></code>'

 <div id="exampleDiv" style="background-color:black;color:orange;"> <div>

请注意，这特定于模板文字中的模板文字。

以编辑后的形式发布，以便我可以发布答案

Answer 1

我使用createElement和innerText （代替innerHTML ）：

 let templateliteral = `let inner = { content : \\` <style> #exampleDivInTemplateLiteral { background-color:lightblue;color:white; } </style> <div id="exampleDivInTemplateLiteral"> <b>this is some text.</b> <input id="exampleInput" placeholder="example input">\\</input> </div>\\`}` let divel = document.getElementById("exampleDiv") let preel = document.createElement("pre"); let codeel = document.createElement("code"); preel.appendChild(codeel) divel.appendChild(preel) codeel.innerText = templateliteral

 <div id="exampleDiv" style="background-color:black;color:orange;"> <div>