JavaScript innerHTML

HTML tag can be used to make design and content in web page. If HTML is loaded once, it can not change HTML element’s property. InnerHTML function can modify and replace text content and HTML element of web page.

innerHTML can embedded with any HTML tags and any text content in HTML page after page is loaded fully on browser.

By innerHTML, we can change whole HTML tag and define new HTML tags in web page.
innerHTML function work as normal html embedding in current page. HTML tag we used should nest properly. Otherwise structure of previous HTML can damage. If we use tags through innerHTML, tag should be closed.

The example of innerHTML can work with getElementById. We are using to add HTML table element in web page which is completed loaded on browser. Another example is simple of innerHTML to add text context in web page. Third example of innerHTML is to take input from user and make innerHTML on run time.

Demo

<html>
<head>
<title>JavaScript innerHTML</title>

<script>
function innerHTMLChTxt()
{
 document.getElementById("textValue").innerHTML="This is innerHTML text";
}

function innerHTMLTBValue()
{
 var htmlTagString="<table width=\"100%\" border=\"1\">"
                    +"  <tr>"
                    +"    <td>&nbsp;</td>"
                    +"    <td>&nbsp;</td>"
                    +"    <td>&nbsp;</td>"
                    +"  </tr>"

                    +"  <tr>"
                    +"    <td>&nbsp;</td>"
                    +"    <td>&nbsp;</td>"
                    +"    <td>&nbsp;</td>"
                    +"  </tr>"
                    +"</table>";

 document.getElementById("htmlTagValue").innerHTML=htmlTagString
}

function insertValue()
{
 document.getElementById("insertValue").innerHTML=document.frm.insertTag.value;
}

</script>
</head>

<body>
<form name="frm">

<div id="textValue"></div>
<br>
<input type="button" name="innerHTMLTextValue" onClick="innerHTMLChTxt()" value="Print" />
This is text for innerHTML
<br>
<br>
<div id="htmlTagValue"></div>
<br>
<input type="button" name="innerhtmlTagValue" onClick="innerHTMLTBValue()" value="Print" />
This is table tag for innerHTML
<br>
<br>
<div id="insertValue"></div>
<br>
<textarea name="insertTag"></textarea> Put any text or HTML tags
<br>
<input type="button" name="insertTagValue" onClick="insertValue()" value="Print" />

</form>
</body>
</html>
Bookmark  

 

Leave a Reply

Security Code:

 

  Random Post