16

Is there a general rule, when one should use document.write to change the website content and when to use .innerHTML?

So far my rules were:

1) Use document.write when adding new content

2) Use .innerHTML when changing existing content

But I got confused, since someone told me that on the one hand .innerHTML is a strange Microsoft standard, but on the other hand I read that document.write is not allowed in XHTML.

Which structures should I use to manipulate my source code with JavaScript?

fragilewindows
  • 1,394
  • 1
  • 15
  • 26
R_User
  • 10,682
  • 25
  • 79
  • 120
  • 4
    Too lazy to go into depth (and you can google why), but basically NEVER use document.write. More information: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice (And, as with most absolutes, I don't truly mean never. There are uses for it, but not very many.) – Corbin Apr 10 '12 at 08:00

4 Answers4

12

innerHTML and document.write are not really comparable methods to dynamically change/insert content, since their usage is different and for different purposes.

document.write should be tied to specific use cases. When a page has been loaded and the DOM is ready you cannot use that method anymore. That's why is generally most used in conditional statements in which you can use it to syncronously load external javascript file (javascript libraries), including <script> blocks (e.g. when you load jQuery from the CDN in HTML5 Boilerplate).

What you read about this method and XHTML is true when the page is served along with the application/xhtml+xml mime type: From w3.org

document.write (like document.writeln) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type

Another difference between these approaches is related on insertion node: when you use .innerHTML method you can choose where to append the content, while using document.write the insertion node is always the part of document in which this method was used.

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Feels lika copy paste answer hard to understand but the last make sense –  Jun 11 '19 at 22:53
  • As you can see, the only mentioned part is the blockquote from w3.org. Feel free to point me what other parts of my answer is copied and pasted @PauliSudarshanTerho – Fabrizio Calderan Jun 12 '19 at 07:12
  • Yes, that and "What you read about this method and XHTML is true when the page is served along with the application/xhtml+xml mime type" was not relevant for me. I read it again and don't understand because I don't know what XHTML is. It does not have so much to tell than it does not work in a very rare case. –  Jun 12 '19 at 11:01
  • 1
    The fact that a single information is not relevant to you it doesn't matter and doesn't mean it is copied from another source. That was an information the OP asked and that is enough. If this answer is not relevant to you or if you don't know what xhtml means just skip to another answer. Now please, if you are still so sure that I copied this text, feel free to flag my answer for plagiarism but be ready to prove it, or stop harassing me. thank you. – Fabrizio Calderan Jun 12 '19 at 11:11
  • The question started "Is there a general rule" but answer is about rare special cases. I think PO want to know if "document.write when adding new content" is true and why it is and how to use it instead of "dont use" answers or mention jQuery, CDN, HTML5 Boilerplate that can be confusing. –  Jun 12 '19 at 11:30
  • Answer can be improved by code example so I see how a typical conditional statements looks like when loading jQuery from the CDN in HTML5 Boilerplate. Also exemplify what insertion node is would be fine. –  Jun 12 '19 at 11:32
  • And no I don't see answer as plagiarism anymore because I read it again. Can't change my downvote. Answer still a bit vague that gave me the feeling. And I actually missed that question mentioned XHTML so thats it. –  Jun 12 '19 at 11:41
12

innerHTML can be used to change the contents of the DOM by string munging. So if you wanted to add a paragraph with some text at the end of a selected element you could so something like

document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'

Though I'd suggest using as much DOM manipulation specific API as possible (e.g. document.createElement, document.createDocumentFragment, <element>.appendChild, etc.). But that's just my preference.

The only time I've seen applicable use of document.write is in the HTML5 Boilerplate (look at how it checks if jQuery was loaded properly). Other than that, I would stay away from it.

Trevor Norris
  • 20,499
  • 4
  • 26
  • 28
  • 1
    Not much of an answer. So 1: some kind of DOM API, 2: innerHTML is ok, 3: never use document.write? –  Jun 11 '19 at 22:43
3

1) document.write() puts the contents directly to the browser where the user can see it.

this method writes HTML expressions or JavaScript code to a document.

The below example will just print ‘Hello World’ into the document

<html>
  <body>
    <script>
    document.write("Hello World!");
    </script>
  </body>
</html>

2) document.innerHTML changes the inner content of an element

It changes the existing content of an element

The below code will change the content of p tag

<html>
<body>
<p id="test" onclick="myFun()">Click me to change my HTML content or my inner HTML</p>
<script>
function myFun() {
  document.getElementById("test").innerHTML = "I'm replaced by exiesting element";
}
</script>
</body>
</html>

you could use document.write() without any connected HTML, but if you already have HTML that you want to change, then document.innerHTML would be the obvious choice.

Mohammed Muzammil
  • 644
  • 9
  • 17
0

I agree with the above comments. Basically:

  • document.write can be useful while the page is loading, to output new HTML tags or content while the browser is building the document object model. That content is output precisely where the JavaScript statement is embedded.
  • .innerHTML is useful at any time to insert new HTML tags/content as a string, and can be more easily directed to specific elements in the DOM regardless of when/where the JavaScript is run.

A couple of additional notes...

When document.write is called from a script outside of the body element, its output will be appended to the body element if called while the page is loading; but once the page is loaded, that same document.write will overwrite the entire document object model, effectively erasing your page. It all depends on the timing of document.write with the page load.

If you are using document.write to append new content to the end of the body element, you may be better off using this:

document.body.innerHTML += "A string of new content!";

It's a bit safer.

tdv
  • 21
  • 2