Javascript provides the innerHTML property, on document object model (DOM) elements, to allow a developer to dynamically update page content. It is without a doubt one of the most powerful functions available to the AJAX web application developer.

The concept of dynamic HTML inclusion, also known as HTML injection, is really very simple. The developer only has to retrieve a handle to a DOM element and then set its innerHTML property equal to some valid HTML text. The browser will take this text and render new DOM elements just as it would in the case that this portion of the page was returned from the server directly. The InnerHTML property is most often utilized on Div elements, marked with an id, and serving as a placeholder in the page where content will be injected.

Most commonly, text injected using innerHTML comes from an asynchronous call to the server. However, it can also been hidden in the page as plain text and repeatedly injected. An example of using hidden text would be when the plain text HTML is used as a template to dynamically add rows to a table.

The power of HTML injection is understood when a developer realizes that a web application can now be made to run out of a single page. A Single Page Application (SPA) will not lose all of its memory state when communicating with the server, and will therefore behave like a more powerful native operating system based program.

References On The Web:

innerHTML Examples

innerHTML W3C Schools

innerHTML Tutorial