document.write(); removes other HTML

Question

I'm doing a test for a comment thing. All I want is to have a little text box where you type stuff and a button that says "Add Comment" that will document.write(); what you put in the text box under the add comment thing. But I'm getting a problem where document.write(); seems to be removing all the other HTML that was written out side the javascript (i.e. the textarea and the "Add Comment" button). When I press the "Add Comment" button, what I wrote in the textarea fills up the whole screen and seems to be blotching out the rest. Here is my code:

<html>
<head>
<script language="JavaScript">
  function add1(){
   var tf = document.getElementById('tf');
   add2(tf.value);
  }
 </script>
</head>
<body>
<p>Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf"  value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >

<script type = "text/javascript">
function add2(input){
    document.writeln(input);
}
</script>
</body>
</html>

Also whatever you add to the page will disappear once you reload the page — mplungjan, Nov 28 '13 at 19:53
Your tf.value will not work as textarea don't have value attribute — Shoaib Chikate, Nov 28 '13 at 20:05

score 4 · Answer 1 · edited May 23 '17 at 12:15

You can not use document.write once the document has completed loading. If you do that then browser will open a new document and it will replace it with the current. So it is the design behavior of document.write

It would be better to use innerHTML to put HTML inside element

Try like this:

<html>
<head>
<script language="JavaScript">
  function add1(){
   var tf = document.getElementById('tf');
   add2(tf.value);
  }
 </script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf"  value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >

<script type = "text/javascript">
function add2(input){

    var test = document.getElementById('test');
    test.innerHTML = input;
}
</script>
</body>
</html>

Also check Why is document.write considered a “bad practice”?

score 1 · Answer 2 · edited May 23 '17 at 11:59

Well instead of using document write, you should append or fill into targeted element, I modified your code a little bit, It might help you.

<html>
<head>
<script language="JavaScript">
  function add1(){
   var tf = document.getElementById('tf');
   add2(tf.value);
  }
 </script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf"  value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >

<script type = "text/javascript">
function add2(input){

    var test = document.getElementById('test');
    test.innerHTML = input;
}
</script>
</body>
</html>

If you wanna append only from original document, you can use it as

test.innerHTML = test.innerHTML + input;

Furthermore

How to append data to div using javascript?

score 1 · Answer 3 · edited May 23 '17 at 12:15

Don't use document.write().Instead use innerHTML

Note:Your code will not work as you are using tf.value where tf is object of textarea which don't have value attribute. So I recommend to use innerHTML.

<html>
<script language="JavaScript">
  <head>
function add1(){
    var tf = document.getElementById('tf');
   add2(tf.innerHTML);
  }
 </script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf"  value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >

<script type = "text/javascript">
function add2(input){

    var test = document.getElementById('test');
    test.innerHTML = input;
}
</script>
</body>
</html>

score 0 · Answer 4 · answered Nov 28 '13 at 19:53

The other comments are correct: document.write() is not something you want to be using. You'll still see that method suggested in some of the older books on JavaScript, but it's really a terrible way to modify the document, for many reasons I won't get into here.

However, no one's suggesting what you can do instead, so I'll point you in the right direction.

If you want to modify elements in your HTML, your best bet is to use the innerHTML property of DOM objects. For example, let's say you have a <div id="output"> that you want to add text to. You would first get a reference to that DOM element thusly:

var outputDiv = document.getElementById( 'output' );

Then you can either completely change the contents of that <div>:

outputDiv.innerHtml = 'Hello world!';

Or you can append to it:

outputDiv.innerHtml = outputDiv.innerHtml + '<br>Hello world!';

Or even more compactly with the += operator (thanks nplungjan):

outputDiv.innerHtml += '<br>Hello world!';

You should also look at jQuery at some point, which gives you a whole boatload of convenience functions to make these kind of manipulations a snap.

I hope this sets you in the right direciton.

Point taken, mplungjan. However, the OP is obviously really new, so I chose not to use the assignment-with-append operator to make it really obvious what's going on. One thing at a time! — Ethan Brown, Nov 28 '13 at 19:56

document.write(); removes other HTML

4 Answers4

Linked