如何在< pre>中编写代码标记而不应用代码 [英] How to write a code inside <pre> tag without apply the code

问题描述

我有两个地方，第一个是< textarea>< / textarea> ，并用于编写代码。

第二个是< pre>< / pre> 并用于显示代码。

问题是，当在文本区域中编写代码要在第二位显示它，代码将作为HTML元素应用并显示，而不仅仅是代码。

错误行为：

正确的行为（我想要的）：

代码：

 < textarea id =inputCodecols =50rows =10>< / textarea> ;<峰; br /> 
< pre id =outputCode>< / pre> 
  

解决方案

使用 innerText 设置第二个textarea将仅添加文本值，而不是HTML。

 < pre id =code>< /预> 
 
 document.getElementById（code）。innerText =< input type ='text'/>; 
  

将插入到 pre 标签中，

 < input type ='text'/> 
  

示例

JSFiddle

I have two places, the first is,<textarea></textarea> and used to write the code.
The second is, <pre></pre> and used to display the code.
The problem is, when write a code in the text area to display it in the second place, the code is applied and displayed as HTML element not just code as I want.

The wrong behavior:

The correct behavior (What I want):

The code:

<textarea id="inputCode" cols="50" rows="10"></textarea><br/>
<pre id="outputCode"></pre>

解决方案

Using innerText to set the value of the second textarea will add the textual value only, not the HTML.

<pre id="code"></pre>

document.getElementById("code").innerText = "<input type='text' />";

Will insert in to the pre tags,

<input type='text' />

Example

JSFiddle

这篇关于如何在< pre>中编写代码标记而不应用代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！