javascript - 文档.write();删除其他 HTML

标签 javascript html

<分区>

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

<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。如果您这样做,那么浏览器将打开一个新文档并将其替换为当前文档。所以是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”?

关于javascript - 文档.write();删除其他 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20273805/

相关文章:

javascript - Tradingview 日历 Javascript

javascript - 使用 JS 是否有多个 if else 条件的简写?

c# - 如何更改 HTML 标签的样式

javascript - 我应该将 Javascript 放在 HTML 文件的头部还是主体中?

javascript - 如何使用jQuery检测页面的滚动位置

html - 如何在不与其他内容混合的情况下将元素定位在底部

css - 调整大小时随背景一起移动的元素

jquery - 加载 div 后,jquery ui 对话框不会再次打开

javascript - WebStorm 中的代码补全就像 ReSharper for Visual Studio 一样

javascript - 自定义 Cordova 插件,释放保留的回调而不调用它