如何在<pre> tag without apply the code

Question

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>

Answer 1

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