Create HTML Try It using HTML and JavaScript

Certain time it’s really boring to update file through text editor and switch to browser reload page if not get proper output then switch back to editor!
Instead of this you can use own custom HTML Try It like w3school’s. It’s pretty simple technique. You need to create one large textarea which contains your html code. and another part which contains output for this we need to use <iframe> tag of HTML. We also need to use JavaScript for this using which we can create interactive application.
Use below snippet for creating design of HTML Try It in your .html file

<textarea id="input">
<!-- contains some predefined code that stored in output.html file -->
</textarea>
<a href="javascript:updateOutput();" accesskey="U">Update Output</a>
<iframe src="output.html" id="output"></iframe>

Tip: In above example, for hyperlink i am using accesskey attribute which is used to create keyboard shortcut. However those shortcuts are different based on browsers/os.

In Javascript we simply need to get text from input box and place inside iframe’s body. For this i am used jQuery, so you need to import it’s library file.

function updateOutput(){
	$("#output").contents().find('body').html($('#input').val());
	document.getElementById("input").focus();
}

Leave a Reply

Your email address will not be published. Required fields are marked *