Very interesting question. Let´s consider a very simple scenario in which we take a textarea to type the html code . and a div tag to display the output of html code. Following is the source code of very simple html code editor. Copy the following source code and paste it on notepad and save it as html file. Now open it with a browser.
HTML-Editor.html :
----------------------------
<!DOCTYPE html>
<html>
<head>
<script>
function showForm(){
var jtext =document.getElementById("text").value;
document.getElementById("location").innerHTML=jtext;
}
</script>
</head>
<body>
<textarea style="width:100%;background:#dfffff;fontsize:16px;height:300px;resize:none;" placeholder="type your html code" onkeyup="showForm()" id="text"></textarea>
<h1 style="text-align:center;">Output of above html code</h1>
<div style="border:1px solid black;min-height:200px;height:auto;" id="location"></div>
</body>
</html>
**************************************** Output ****************************************
Output of above html code
