innerHTML
1、查找元素——document.getElementById("intro")
2、输出查找的结果：
(1)var a=document.getElementById("intro");
document.write(a.innerHTML);
(2) <div id="me"><b>试试吧</b></div>
var b=document.getElementById("me");
document.write(b.innerHTML);//write输出试试吧
alert(b.innerHTML)//alert输出的是<b>试试吧</b> 代码+文字
alert(b.innerText)//只输出文字——试试吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p id="intro"><b>Hello World!</b></p><!--p代表段落 b是加粗 -->
<p>本例演示 <b>getElementById</b> 方法！</p>
<div id="me"><b>试试吧</b></div>
</body>
</html>
<script>
//通过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输出的是<b>试试吧</b> 代码+文字
alert(b.innerText)//只输出文字
b.innerHTML=" ";//赋个空字符串
b.innerHTML="<font color=red>我换了</font>";//重新设置内容
//改可以直接写成
/*var b=document.getElementById("me");
document.write(b.innerHTML="我换了")*/
</script>
结果为：
例子：通过p标签的id来获取内容并修改为新的内容
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>上面的段落被一条 JavaScript 脚本修改了。</p>
</body>
</html>
结果：
New text!
上面的段落被一条 JavaScript 脚本修改了。
再举例：
同样方法，只是写法不同
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
<p>"Old Header" 已被修改为 "New Header"。</p>
</body>
</html>
New Header
"Old Header" 已被修改为 "New Header"。
再举一个，改变图片的：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="/i/eg_tulip.jpg" />
<script>
document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</script>
<p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p>
</body>
</html>
原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。
时间： 2024-10-11 18:10:21