What is the correct way to write HTML using Javascript?

javascript html dynamic code-generation document.write
Gary Willoughby picture Gary Willoughby · Oct 7, 2009 · Viewed 121.4k times · Source

It seems that experienced web developers frown upon using document.write() in JavaScript when writing dynamic HTML.

Why is this? and what is the correct way?

Answer

Ricky picture Ricky · Oct 7, 2009

document.write() will only work while the page is being originally parsed and the DOM is being created. Once the browser gets to the closing </body> tag and the DOM is ready, you can't use document.write() anymore.

I wouldn't say using document.write() is correct or incorrect, it just depends on your situation. In some cases you just need to have document.write() to accomplish the task. Look at how Google analytics gets injected into most websites.

After DOM ready, you have two ways to insert dynamic HTML (assuming we are going to insert new HTML into <div id="node-id"></div>):

  1. Using innerHTML on a node:

    var node = document.getElementById('node-id');
node.innerHTML('<p>some dynamic html</p>');

  2. Using DOM methods:

    var node = document.getElementById('node-id');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('some dynamic html'));
node.appendChild(newNode);

Using the DOM API methods might be the purist way to do stuff, but innerHTML has been proven to be much faster and is used under the hood in JavaScript libraries such as jQuery.

Note: The <script> will have to be inside your <body> tag for this to work.

Related questions

create unique id with javascript

I have a form where a user can add multiple select boxes for multiple cities. The problem is that each newly generated select box needs to have a unique id. Can this be done is JavaScript? UPDATE: here is the …

Read More
Is there a best practice for generating html with javascript

I'm calling a web service that returns an array of objects in JSON. I want to take those objects and populate a div with HTML. Let's say each object contains a url and a name. If I wanted to generate …

Read More
Dynamically populate a field based on dropdown selection (Javascript / HTML)

I am looking for some help in coding my companies website. We are trying to create a custom "part number generator" based on selections made from a dropdown box. Our goal is that when a user picks an option in …

Read More