<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">您好!</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>
结果是:
如果改为:var mychar=document.getElementById("con").innerHTML;
结果就是:
原因是:前者获取到的是整个对象,后者是获取到其中的内容
---------------------------------------------------------------------------------------------------------------------------------
由比如,将代码改为如下顺序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
<script type="text/javascript">
var mychar=document.getElementById("con").innerHTML;
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</head>
<body>
<p id="con">您好!</p>
</body>
</html>
结果就是:null
原因是:代码是顺序执行的,先调用了JavaScript代码,但是这个时候还没有ID为“con”的元素,得到空
----------------------------------------------------------------------------------------------------------------------
innerHTML属性用于获取或替换HTML元素的内容。语法为:object.innerHTML (注意:区分大小写)
示例:
<html>
<head>.....</head>
<body>
<h2 id="con">原始标题</H2>
<script type="text/javascript">
var mychar=document.getElementById("con"); ;
document.write("原标题:"+mychar.innerHTML+"<br>");
mychar.innerHTML="Hello World!"
document.write("修改后的标题:"+mychar.innerHTML);
</script>
</body>
</html>
结果:原标题:原始标题
修改后的标题:Hello World!