document.write() overwrites entire page

Question

So, I was trying to make HTML appear at the click of a button, but instead of inserting the HTML right where the script tag was, the entire page was overwritten with the code that was supposed to be generated. After experimenting, I found that something simple like

document.write("<p>" + "Hello!" + "</p>")

would simply insert it as it should. On the other hand, the code I was trying to do replaced the entire page.

Does anyone know how to fix this? Here is some example code.

function writeIFrame() {
    document.write('<iframe width="500" height="300" src="https://www.youtube.com/embed/UJFdywQqovI" frameborder="0" allowfullscreen></iframe><p>Check out my YouTube channel <a href="https://www.youtube.com/channel/UCkqJM5HVjuvPA9H1VuFU5pQ">here</a> and subscribe!');
}

`document.write()` is not a great way to manipulate page content. You can do this far more effectively by manipulating the DOM with the built-in methods or using a library like jQuery. — , Mar 23 '15 at 01:19
Simple: [don't use it](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) for DOM manipulation. — Shomz, Mar 23 '15 at 01:31
@HoboSapiens thank you for your information. I have been recently studying jQuery. What commands do you think is preferable for adding to the DOM and the most efficient? — TheMinecraftMan757, Mar 23 '15 at 01:39
@duskwuff What did you do to make the HTML tag reference appear correctly? — TheMinecraftMan757, Mar 23 '15 at 01:40
@TheMinecrafterandBlendmist Placed it in a block indented with four spaces. Click the "edited … ago" link notice for details. — duskwuff -inactive-, Mar 23 '15 at 02:15

score 1 · Answer 1 · answered Apr 27 '16 at 23:34

1

Depending on where your function is getting called.

If document.write is called after html loading complete. It would overwrite the whole page. (Because appending it after closing html tags causes wrong syntax, thus make no sense doing so.)

answered Apr 27 '16 at 23:34

Weishi Z

1,478
4
16
36

score 0 · Answer 2 · answered Mar 23 '15 at 01:37

You can try using this:

      var htmlString = "[iframe width="500" height="300" src="https://www.youtube.com/embed/UJFdywQqovI" frameborder="0" allowfullscreen][/iframe][p]Check out my YouTube channel [a href="https://www.youtube.com/channel/UCkqJM5HVjuvPA9H1VuFU5pQ"]here[/a] and subscribe!";

      function print (message){
      var output = document.getElemenetById('id');
      output.innerHTML = message;
         }


    print(htmlString);

I hope this helps. If you need more clarity, let me know!

Thanks for your answer. I have not found the time to test his out, but I guess I should have thought of using innerHTML for this instead of document.write(). — TheMinecraftMan757, Mar 24 '15 at 03:23

score -1 · Answer 3 · answered Oct 31 '17 at 12:32

It's been two years since you asked this so, I suppose you will know the answer but I've seen that nobody answered correctly yet: document.write() will always overwrite all the document.

The best way to do what you were asking is to use the .innerHTML method with "+=" for example:

document.getElementById("test").innerHTML+= "Hi!";

And then you will have:

<p id="test"> Hi! </p>

Remark that += will always keep what is already written. If we want to replace what is inside the <p> tag we must use only =.

I know that you will for sure know this nowadays, but I hope to somebody can find this question and maybe get a good answer with this. :)

There are already correct answers. It does not always overwrite the entire document, only if it's called after `document.close()` has been called. The browser calls `document.close()` after it finishes parsing the HTML. — Juan Mendes, Oct 31 '17 at 12:45

document.write() overwrites entire page

3 Answers3