Question

我正在做一个评论的测试。我想要的只是有一个文本框，你输入的东西和一个按钮，上面写着“添加注释”，它将是document.write（）;你在添加评论的东西下面的文本框中放了什么。但我在document.write（）;似乎是删除了所有其他在javascript旁边写的HTML（即textarea和“Add Comment”按钮）。当我按下“添加注释”按钮时，我在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>

Answer 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”?

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

Answer 3

其他评论是正确的：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，它为您提供了大量便利功能，使这些操作变得轻而易举。

我希望这会让你处于正确的方向。

Answer 4

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

注意：您的代码将无法正常工作，因为您使用的是tf.value，其中tf是textarea的对象，它没有value属性。所以我建议使用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>

document.write（）的;删除其他HTML

4 个答案: