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的样式