What is the correct way to write HTML using Javascript?

by

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.

More Related Contents:

  1. How do I create an HTML element with attributes and events using JavaScript?
  2. document.write() overwriting the document?
  3. Is there a best practice for generating html with javascript
  4. How can I create unique IDs with JavaScript?
  5. Can search engines index JavaScript generated web pages?
  6. How do I add something to my html using javascript without erasing the whole page
  7. How to have html popup appear over main html page?
  8. jQuery document.getElementById() issue
  9. jquery get id of input selected text
  10. Difference between and ? [duplicate]
  11. Can you style an html radio button to look like a checkbox?
  12. How can I detect if a browser is blocking a popup?
  13. onclick open window and specific size
  14. Retrieving HTML5 video duration separately from the file
  15. Get multiple elements by Id
  16. onclick go full screen
  17. How to make div fixed after you scroll to that div?
  18. Property ‘submit’ of object # is not a function
  19. Javascript/HTML Storage Options Under File Protocol (file://)
  20. Setting minimum size limit for a window minimization of browser?
  21. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  22. Is it possible to add html inside a title attribute?
  23. How to set custom validation messages for HTML forms?
  24. Trigger standard HTML validation (form) without using submit button? [duplicate]
  25. Replacing Entire Page Including Head Using Javascript
  26. Remove ‘All Files’ option from HTML file input
  27. refresh div with jquery
  28. Remove everything within script and style tags
  29. Clear localStorage on tab/browser close but not on refresh
  30. Getting a sticky header to “push up”, like in Instagram’s iPhone app using CSS and jQuery

Leave a Comment