JavaScript HTML DOM——改变HTML

　　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

1、改变 HTML 输出流

2、改变 HTML 内容

3、改变 HTML 属性

猜你喜欢