dom查找元素替换html,JavaScrip——DOM操作（查找HTML元素/修改元素）

innerHTML

1、查找元素——document.getElementById("intro")

2、输出查找的结果：

(1)var a=document.getElementById("intro");

document.write(a.innerHTML);

(2)

试试吧

var b=document.getElementById("me");

document.write(b.innerHTML);//write输出试试吧

alert(b.innerHTML)//alert输出的是试试吧 代码+文字

alert(b.innerText)//只输出文字——试试吧

无标题文档

Hello World!

本例演示 getElementById 方法！

试试吧

//通过id来查找HTML中的元素

var a=document.getElementById("intro");

document.write(a.innerHTML);var b=document.getElementById("me");

document.write(b.innerHTML);//write输出试试吧

alert(b.innerHTML)//alert输出的是试试吧 代码+文字

alert(b.innerText)//只输出文字

b.innerHTML=" ";//赋个空字符串

b.innerHTML="我换了";//重新设置内容

//改可以直接写成/*var b=document.getElementById("me");

document.write(b.innerHTML="我换了")*/

结果为：

例子：通过p标签的id来获取内容并修改为新的内容

Hello World!

上面的段落被一条 JavaScript 脚本修改了。

结果：

New text!

上面的段落被一条 JavaScript 脚本修改了。

再举例：

同样方法，只是写法不同

Old Header

var element=document.getElementById("header");

element.innerHTML="New Header";

"Old Header" 已被修改为 "New Header"。

New Header

"Old Header" 已被修改为 "New Header"。

再举一个，改变图片的：

原始图片是郁金香(eg_tulip.jpg)，但是已被修改为卢浦大桥(shanghai_lupu_bridge.jpg)。

原始图片是郁金香(eg_tulip.jpg)，但是已被修改为卢浦大桥(shanghai_lupu_bridge.jpg)。