有关Javascript中document.write的输出
我觉得下面两个语句从逻辑上讲是一样的啊，为什么第一个不会覆盖HTML页面，但第二个在单击按钮之后却会覆盖原页面的两条语句呢？求大神指教语句1<!DOCTYPEhtml><...
我觉得下面两个语句从逻辑上讲是一样的啊，为什么第一个不会覆盖 HTML 页面，但第二个在单击按钮之后却会覆盖原页面的两条语句呢？求大神指教
语句1
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<script>
document.write("My First JavaScript");
</script>
</body>
</html>
语句2
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("My First JavaScript");
}
</script>
</body>
</html> 展开
语句1
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<script>
document.write("My First JavaScript");
</script>
</body>
</html>
语句2
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("My First JavaScript");
}
</script>
</body>
</html> 展开
展开全部
第一个document.write是在页面还没有完全传送到浏览器时进行输出的，这样它的输出就会加入到整个数据流中一并发送到客户端浏览器中，因此不会覆盖页面中的其他内容；
而第二个document.write是在函数中通过点击事件触发运行的，这时候整个页面的数据已经全部显示完毕，再次用document.write就会覆盖整个页面的其他内容了。这个时候如果要通过前端脚本来改变网页内容，就必须通过操作Dom对象才能实现了，比如：
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<div id=xxx></div>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.getElementById("xxx").innerHTML="My First JavaScript";
}
</script>
</body>
</html>
而第二个document.write是在函数中通过点击事件触发运行的，这时候整个页面的数据已经全部显示完毕，再次用document.write就会覆盖整个页面的其他内容了。这个时候如果要通过前端脚本来改变网页内容，就必须通过操作Dom对象才能实现了，比如：
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<div id=xxx></div>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.getElementById("xxx").innerHTML="My First JavaScript";
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
