Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashlynn Pai
Ashlynn Pai
11,679 Points

Writing from JS to the DOM

I want the user to submit a number. The number becomes a JS variable and is returned as x. Now I want to write it back to the DOM and look decent.

Right now when it writes back to the DOM it wipes the whole page out. I would like it to write back to the form or something like that.

http://codepen.io/ashlynnpai/pen/uqepg

1 Answer

James Barnett
James Barnett
39,199 Points

document.write in this case has to open the document for writing so it calls document.open which in turn removes everything from the DOM, you don't want to do that, instead you want to modify one element.

Your jQuery to update the html of #answer is fine, once you comment out the document.write line, it will work.

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

It might be important to note that document.write doesn't erase the page. If document.write is called after the page has finished loading, it implicitly calls document.open, which in turn opens the document for writing and empties its content.

James Barnett
James Barnett
39,199 Points

Dino Paškvan - I haven't done much DOM work in vanilla JS.

What's the distinction you are drawing between overwrites everything and opens the document for writing and empties its content. I have a feeling there might be something fundamental I missed in my cursor reading on MDN earlier.

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

From an observer's point of view, there's no difference — the end result is the same, as the content of the document gets replaced by what has been passed to document.write. But it's not document.write that does the erasing. It just makes an implicit call to document.open.

Take a look at these two examples:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example 1</title>
    <script>
      document.write('<h1>Written by JS!</h1>');
    </script>
</head>
<body>
    <h2>In HTML!</h2>
</body>
</html>

As the document is already open (because it's loading), document.write is free to write to it, and will do so without removing anything from the DOM. The h1 will appear before the h2 tag. If you move the <script>...</script> to the bottom of the body, the h1 will appear after the h2, but it still won't delete the content of the document. So, document.write doesn't overwrite anything, it adds to an open document.

The next example works differently:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example 2</title>
    <script>
      setTimeout(function() {
        document.write('<h1>Written by JS!</h1>');
      }, 3000);
    </script>
</head>
<body>
    <h2>In HTML!</h2>
</body>
</html>

In this example, document.write is called after a 3-second delay — so it runs after the document has finished loading. Because document.write cannot write to a document that's not open, it calls document.open which removes everything from the document.

You can further confirm this behaviour if you navigate to some webpage, open up the JavaScript console and run document.open() in it. You'll see that the webpage gets deleted.

The distinction is that you said that document.write overwrites everything when that's not true. That function cannot overwrite anything on its own. It only writes to a document which is open.

James Barnett
James Barnett
39,199 Points

> The distinction is that you said that document.write overwrites everything when that's not true. That function cannot overwrite anything on its own. It only writes to a document which is open.

That's very instructive, I see what you mean about document.open vs document.write

Ashlynn Pai
Ashlynn Pai
11,679 Points

Thanks guys, when I tried just $("#answer").html(x); last night it didn't work but I must have forgotten to save or something when I tested. Today it works! Yay!

Also Dino thanks for the explanation.