码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript HTML DOM——改变HTML

时间:2018-10-14 19:09:48      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:动态   value   attr   marked   asc   举例   charset   html dom   时间   

  HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1、改变 HTML 输出流

  JavaScript 能够创建动态的 HTML 内容:

  今天的日期是: Sun Oct 14 2018 17:06:00 GMT+0800 (中国标准时间)

  在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

  提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>        
12         <script>
13             document.write(Date());
14         </script>
15     </body>
16 </html>

  输出结果:Sun Oct 14 2018 17:15:26 GMT+0800 (中国标准时间) 

2、改变 HTML 内容

  修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

  如需改变 HTML 元素的内容,请使用这个语法:

1 document.getElementById(id).innerHTML=new HTML

   举例(本例改变了p元素的内容):

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12     
13         <p id="p1">Hello, world!</p>
14         <script>
15             var x = document.getElementById("p1");
16             x.innerHTML = "New text!"
17         </script>
18     </body>
19 </html>

  输出结果:New text!

3、改变 HTML 属性

  如需改变 HTML 元素的属性,请使用这个语法:

1 document.getElementById(id).attribute=new value

  举例(本例改变了 <img> 元素的 src 属性):

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12     
13         <img id="image1" src=hello.jpg>
14     
15         <script>
16             var x = document.getElementById("image1");
17             x.src = "baidu.jpg";
18         </script>
19     </body>
20 </html>

 

JavaScript HTML DOM——改变HTML

标签:动态   value   attr   marked   asc   举例   charset   html dom   时间   

原文地址:https://www.cnblogs.com/zyjhandsome/p/9787008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!