What are alternatives to document.write?

What are alternatives to document.write?

In tutorials I’ve learnt to use document.write. Now I understand that by many this is frowned upon. I’ve tried print(), but then it literally sends it to the printer.
So what are alternatives I should use, and why shouldn’t I use document.write? Both w3schools and MDN use document.write.

Solutions/Answers:

Solution 1:

As a recommended alternative to document.write you could use DOM manipulation to directly query and add node elements to the DOM.

Solution 2:

The reason that your HTML is replaced is because of an evil JavaScript function: document.write().

It is most definitely “bad form.” It only works with webpages if you use it on the page load; and if you use it during runtime, it will replace your entire document with the input. And if you’re applying it as strict XHTML structure it’s not even valid code.


the problem:

document.write writes to the document stream. Calling document.write on a closed (or loaded) document automatically calls document.open which will clear the document.

quote from the MDN

Related:  Why does typescript use “Like” types?

document.write() has two henchmen, document.open(), and document.close(). When the HTML document is loading, the document is “open”. When the document has finished loading, the document has “closed”. Using document.write() at this point will erase your entire (closed) HTML document and replace it with a new (open) document. This means your webpage has erased itself and started writing a new page – from scratch.

I believe document.write() causes the browser to have a performance decrease as well (correct me if I am wrong).


an example:

This example writes output to the HTML document after the page has loaded. Watch document.write()‘s evil powers clear the entire document when you press the “exterminate” button:

I am an ordinary HTML page.  I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.write('This HTML page has been succesfully exterminated.')" value="exterminate"/>
me!

the alternatives:

  • .innerHTML This is a wonderful alternative, but this attribute has to be attached to the element where you want to put the text.
Related:  How to remove undefined and null values from an object using lodash?

Example: document.getElementById('output1').innerHTML = 'Some text!';

  • .createTextNode() is the alternative recommended by the W3C.

Example: var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

NOTE: This is known to have some performance decreases (slower than .innerHTML). I recommend using .innerHTML instead.


the example with the .innerHTML alternative:

I am an ordinary HTML page. 
I am innocent, and purely for informational purposes. 
Please do not 
<input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/>
 me!
<p id="output1"></p>

Solution 3:

Here is code that should replace document.write in-place:

document.write=function(s){
    var scripts = document.getElementsByTagName('script');
    var lastScript = scripts[scripts.length-1];
    lastScript.insertAdjacentHTML("beforebegin", s);
}

Solution 4:

Just dropping a note here to say that, although using document.write is highly frowned upon due to performance concerns (synchronous DOM injection and evaluation), there is also no actual 1:1 alternative if you are using document.write to inject script tags on demand.

There are a lot of great ways to avoid having to do this (e.g. script loaders like RequireJS that manage your dependency chains) but they are more invasive and so are best used throughout the site/application.

Related:  How to get the response of XMLHttpRequest?

Solution 5:

The question depends on what you are actually trying to do.

Usually, instead of doing document.write you can use someElement.innerHTML or better, document.createElement with an someElement.appendChild.

You can also consider using a library like jQuery and using the modification functions in there: http://api.jquery.com/category/manipulation/

Solution 6:

This is probably the most correct, direct replacement: insertAdjacentHTML.

References