JavaScript HTML：改变HTML内容与输出流.pdfVIP

JavaScriptHTMLDOM-改变HTML

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

改变HTML输出流

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

今天的日期是：WedJan18201710:21:19GMT(时间)

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

实例

!DOCTYPEhtml

html

body

script

document.write(Date());

/script

/body

/html

尝试一下»

绝对不要在文档加载完成使用document.write()。这会覆盖该文

档。

改变HTML内容

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

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

document.getElementById(id).innerHTML新的HTML

本例改变了p元素的内容：

实例

html

body

pid=p1HelloWorld!/p

script

document.getElementById(p1).innerHTML=新文本!;

/script

/body

/html

尝试一下»

本例改变了h1元素的内容：

实例

!DOCTYPEhtml

html

body

h1id=headerOldHeader/h1

script

varelement=document.getElementById(header);

element.innerHTML=新标题;

/script

/body

/html

尝试一下»

：

•上面的HTML文档含有id=header的h1元素

•我们使用HTMLDOM来获得id=header的元素

•JavaScript更改此元素的内容(innerHTML)

改变HTML属性

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

document.getElementById(id).attribute新属性值

本例改变了img元素的src属性：

实例

!DOCTYPEhtml

html

body

imgid=imagesrc=smiley.gif

script

document.getElementById(image).src=landscape.jpg;