HTML code dynamically using JavaScript

The easiest way to modify the content of an HTML element is by using the innerHTML property . The innerHTML property gets or sets the HTML or XML markup contained within the element. By using this property, supported in all modern browsers we can assign new HTML or text to any containment element, and the page is instantly updated and reflowed to show the new content.

document.getElementById('test').innerHTML="<h2>This is heading using JavaScript</h2>";

Browser View

This will change...

Source

<html> <body> <div id="test"><b>This will change...</b></div> <button onclick="changeIt()">Change....</button> <script> function changeIt() { document.getElementById('test').innerHTML="<h2>Changed using innerHTML!!</h2>"; } </script> </body> </html>

Example explained: The HTML document above contains a < div > element with id="test". Here use the HTML DOM to get the element with id="test". A JavaScript changes the content (innerHTML) of that element to "Changed using innerHTML!!" A DOMString containing the HTML serialization of the element's descendants. Setting the value of innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString. It is used mostly in the web pages to generate the dynamic html such as registration form, comment form, links etc.

Next : How to add html elements dynamically with JavaScript?

Related Topics