Question

javascript的document.write问题

部分代码：
<script language="JavaScript">
function print()
{
document.write("<h1>abc!<h1>");
}
</script>

<div>
hello!
</div>
<form>
<input id="abc" type="button" value="try" size=20 onClick="print()">
</form>
网页本来能显示hello和按钮，点完try按钮后整个屏幕只有abc了。
请问这是怎么回事？
怎样让所有内容同时显示在网页中？
谢谢！

Answer 1

document.write("<h1>abc!<h1>");这个是输出到浏览器。会清空之前的。
用DIV的ID去控制，写到DIV里去
function print()
{
var div = document.getElementById("div_id");
div.innerHTML = div.innerHTML+"<h1>abc!<h1>"
}

<div id="div_id">
hello!
</div>

追问

没想到不是简单问题，回头给你加分。

那为什么我在代码里直接这么写

print();

就能输出而且没有清空其他内容呢？

追答

document.write这是一个输出流，

print();
这是在页面没加载完的时候调用，所有和页面的输出是同一个流，
而如果是onclick事件调用的话，之前的输出流已经关闭，document.write会创建一个新的对象来输出，而浏览器容器是同一个，所有会覆盖

Answer 2

先想好在哪构建 可以事先创建一个空DIV并制定ID
<div id="write_target"></div>
最后 JS改为
document.getElementById("write_target").innerHTML("<h1>abc!<h1>");

即可
你分太少

Answer 3

那为什么我在代码里直接这么写
<script language="JavaScript">
print();
</script>
就能输出而且没有清空其他内容呢？
这样再页面加载的时候就调用了，已经写了页面才显示出来，所以会一起显示

Answer 4

函数调用呀 你触发了onClick事件后，调用了print()方法 所以document.write 就输出了abc!