Javascript Part-3 inner html property to create html

Posted by : Sudhir Chekuri Sunday, 27 October 2013

In the below example onkeyup event is fired after every release of keyboard key.
placeholder property is used to display a watermark message inside textbox.
innerHTML is the property used in js code to add h1 tag inside paragraph tag.

Js code to print text entered in textbox as heading in paragraph

<html>
<head>
<script type="text/javascript">
function showMsg() {
var userInput = document.getElementById('userInput').value;
document.getElementById('userMsg').innerHTML = "<h1>"+userInput+"</h1>";
}
</script>
</head>
<body>
<input type="text" maxlength="40" id="userInput" onkeyup="showMsg()" placeholder="Enter text here..." />
<p id="userMsg"></p>
</body>
</html>