二十五岁时我们都一样愚蠢、多愁善感,喜欢故弄玄虚,可如果不那样的话,五十岁时也就不会如此明智。
标题:JavaScript htmldom html
HTML DOM允许JavaScript来修改HTML元素的内容.
修改HTML输出流
JavaScript可以创建动态的HTML内容:
Date: Sat Feb 11 2017 00:17:17 GMT+0800 (中国标准时间)
使用JavaScript, document.write() 可以直接写到HTML输出流:
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>文档加载以后,不要使用document.write(). 它将覆盖文档.
改变HTML内容
修改HTML元素的内容的最简单的方法是使用innerHTML属性.
修改HTML元素的内容,使用如下语法:
document.getElementById(id).innerHTML = new HTML这个实例修改段落元素
<p>
的内容:<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML = "New text!"; </script> </body> </html>这个实例修改
<h1>
元素内容:<!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script> var element = document.getElementById("header"); element.innerHTML = "New Header"; </script> </body> </html>实例解析:
- 在HTML文档中包含一个id="header" 的
<h1>
元素- 我们使用HTML DOM得到id="header"元素
- JavaScript 修改这个元素的内容 (innerHTML)
修改属性值
改变一个HTML属性的值,使用如下语法:
document.getElementById(id).attribute = new value此示例修改
<img>
元素的src属性:<!DOCTYPE html> <html> <body> <img id="myImage" src="smiley.gif"> <script> document.getElementById("myImage").src = "landscape.jpg"; </script> </body> </html>实例解析:
- HTML文档包含一个id="myImage"的
<img>
元素- 我们使用HTML DOM 得到id="myImage"的元素
- JavaScript 修改元素的src属性 由"smiley.gif" 改为 "landscape.jpg"