文档.write();删除其他 HTML [重复]答案

【问题标题】：document.write(); removes other HTML [duplicate]文档.write();删除其他 HTML [重复]
【发布时间】：2013-12-14 22:40:13
【问题描述】：

我正在对评论进行测试。我想要的只是有一个小文本框，您可以在其中输入内容和一个显示“添加评论”的按钮，该按钮将 document.write();您在添加评论下的文本框中输入的内容。但是我遇到了一个问题 document.write();似乎正在删除写在 javascript 之外的所有其他 HTML（即 textarea 和“添加评论”按钮）。当我按下“添加评论”按钮时，我在 textarea 中写的内容填满了整个屏幕，似乎遮盖了其余部分。这是我的代码：

<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>

【问题讨论】：

此行为是设计使然。不要使用document.write()。
这个 Q 很可能是重复的
此外，您添加到页面的任何内容都会在您重新加载页面后消失
您的 tf.value 将不起作用，因为 textarea 没有 value 属性

标签： javascript html

【解决方案1】：

文档加载完成后，您将无法使用document.write。如果您这样做，那么浏览器将打开一个新文档，并将其替换为当前文档。所以是document.write的设计行为

最好使用innerHTML 将 HTML 放入元素中

试试这样：

<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>

同时检查Why is document.write considered a “bad practice”?

【讨论】：

【解决方案2】：

好吧，而不是使用文档写入，你应该追加或填充目标元素，我修改了你的代码，它可能会对你有所帮助。

<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>

如果您只想从原始文档中追加，您可以将其用作

test.innerHTML = test.innerHTML + input;

还有

How to append data to div using javascript?

【讨论】：

【解决方案3】：

不要使用document.write()。而是使用innerHTML

注意：当您使用 tf.value 时，您的代码将无法工作，其中 tf 是没有 value 属性的 textarea 对象。所以我推荐使用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>

【讨论】：

【解决方案4】：

其他 cmets 是正确的：document.write() 不是您想要使用的东西。您仍然会在一些关于 JavaScript 的较早书籍中看到建议的方法，但它确实是一种修改文档的糟糕方法，出于多种原因，我不会在这里讨论。

但是，没有人建议您可以做什么，所以我会为您指出正确的方向。

如果您想修改 HTML 中的元素，最好的办法是使用 DOM 对象的 innerHTML 属性。例如，假设您有一个要添加文本的<div id="output">。因此，您首先会获得对该 DOM 元素的引用：

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

那么你可以完全改变那个<div>的内容：

outputDiv.innerHtml = 'Hello world!';

或者你可以附加到它：

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

或者使用 += 运算符更简洁（感谢 nplungjan）：

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

您还应该在某个时候查看jQuery，它为您提供了一大堆便利功能，让这些操作变得轻而易举。

我希望这能让你走上正确的道路。

【讨论】：

追加请使用+=
要点，mplungjan。但是，OP 显然是非常新的，所以我选择不使用 assignment-with-append 运算符来使发生的事情变得非常明显。一次一件事！
不过，我会更新我的答案以包含此选项。