JavaScript HTML DOM——改变HTML

Posted zyjhandsome

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript要点 HTML DOM - 改变 HTML

JavaScript DOM对象

JavaScript HTML DOM - 改变 CSS

JavaScript HTML DOM——改变CSS（样式）

JavaScript HTML DOM - 改变 HTML

JavaScript之DOM改变HTML的样式