2-1 JavaScript-输出内容(document.write)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

JavaScript-输出内容(document.write)

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

第一种:输出内容用""括起,直接输出""号内的内容。

<script type="text/javascript">
  document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
</script>

第二种:通过变量,输出内容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名,输出变量存储的内容。
</script>

第三种:输出多项内容,内容之间用+号连接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

第四种:输出HTML标签,并起作用,标签使用""括起来。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
  document.write("JavaScript");
</script>

关于JS输出空格问题,如果想要实现输出空格,可以使用特殊字符“&nbsp;”实现

<script type="text/javascript">
  document.write("&nbsp;");//输出空格
</script>

任务

现在我们来输出两条语句,在网页中输点内容吧!

1. 右边编辑器第9行,使用document.write输出mychar变量的内容,同时输出一个换行符。

2. 右边编辑器第10行,使用document.write一条语句,通过变量mystr,mychar,"的忠实粉丝!",输出完整的一句"我是JavaScript的忠实粉丝!"。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>document.write</title>
  6. <script type="text/javascript">
  7. var mystr="我是";
  8. var mychar="JavaScript";
  9.  
  10.  
  11. </script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>
下一节