Blog

Javascript : Inject HTML Into a page without being disruptive

Greetings!

Occasionally it comes up in a project, for many different reasons, to utilize javascript or jquery in a user interaction or user interface design scenario. Usually, with javascript, this can be found in the form of an onmouseover() or onmouseclick() query.

Sometimes logic has to be maintained where if certain conditions are met such as a language preference or country of origin, that such choices must change elements or change behaviors within a website.

In this scenario, where text or html has to be rewritten after said conditions are met, we have found that the best way to non-destructively dynamically update a page with javascript is to merge a CSS identifier and javascript html insert command :

First you will want to identify where on the page you want the update (text or otherwise) to happen :

 

 

Then , usually in thetag or wherever appropriate, you define the javascript code that updates based on the CSS id tag :


document.getElementById('container').innerHTML += '

content

‘;

Simple as that!