Question

I’m trying to get contents between the <pre>...</pre> tag to be rendered by JavaScript, where the contents is dynamic. What I hope to do is to type an input within a textarea to update display in the <pre> tags.

I’m unsure how to specify the contents within the <pre> tags to take the value from textarea on every textarea update.

Many Thanks!

Answer 1

Seeing the code you’re working with would help greatly, but if I’m reading correctly, this should help. Assuming HTML like this:

<textarea id="type"></textarea>
<pre id="output"></pre>

This option uses pure javascript:

var textarea = document.getElementById('type'),
    pre = document.getElementById('output');

if(textarea.addEventListener) {
    textarea.addEventListener('keyup',function(){
        pre.textContent = this.value;
    });
} else {
    textarea.attachEvent('onkeyup',function(){
        pre.textContent = this.value;
    });
}

This code block uses the jQuery library for brevity:

$('#type').on('keyup',function(){
    $('#output').text($(this).val());
});

Note that in both situations, I am setting the text of the <pre>, not the HTML. This allows you to enter HTML characters like < into the textarea and have them be properly escaped in your <pre> element.

Pure JavaScript Demo

jQuery Demo

If you don’t wish to change the <pre> until after you leave the <textarea>, then just change 'keyup' and 'onkeyup' to 'change' and 'onchange' respectively.