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>

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>

• javascript
• html

Share Improve this question Follow edited Aug 7, 2015 at 1:46 Lion King asked Aug 7, 2015 at 1:29 Lion KingLion King 33.8k2626 gold badges9090 silver badges157157 bronze badges 2

• Something like this? jsfiddle/h175y2vx – Rick Hitchcock Commented Aug 7, 2015 at 1:38
• @RickHitchcock: Yes, like that. – Lion King Commented Aug 7, 2015 at 1:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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