HTML Code Preview Script using JavaScript and JQuery

Sometimes you may want to see online preview of your HTML code.
So that you can evaluate your HTML code for correctness and take corrective action if needed.

Here this little script, both in simple JavaScript and in JQuery, will provide you evaluation facility for your HTML code.
You will enter your HTML code in upper textarea box. After that your can use this little JavaScript code in your keyup event for quick preview of your HTML code or your can use onclick event for getting the output after you think everything is fine and now it is time to test my HTML output. You can use any event of your choice applicable with your element.

HTML Code Preview Script: Using simple JavaScript Code

<script type="text/javascript">
function showHTML () {
    // ref textarea
    textarea1 = document.getElementById('txt1');
    // where to view HTML code
    viewHtml = document.getElementById('div1');
    // Finally get HTML output in div
    viewHtml.innerHTML = textarea1.value ;
<textarea id="txt1" name="txt1" cols="50" rows="7"
<div id="div1" name="div1"
 style="position:relative;width:350px;height:200px;border:1px solid
<!-- <input type="button" onclick="showHTML()" value="Ok" /> -->

HTML Code Preview Script: Using JQuery

(update on Jul 2009): Replace the above function by jQuery function code:

function showHTML () {
   // get the value from textarea $('#txt1').val()
   // and then assign that to #div1 as html using jQuery selector '#div1'.

Online View:

Enter your HTML Code here:

You may have found the JavaScript code for HTML preview very small and easy to use! If, yes, please share it!

Related: Validate Your Markup according to rule

  • # 1 - by harianus

    nice, thanks

  • # 2 - by harianus

    nice, thanks

  • # 3 - by Maxe

    nice, thanks (:D)

  • # 4 - by Maxe

    nice, thanks (:D)

Comments are open for an year period. Please, write here on Facebook page.