innerHTML属性

时间:2023-12-13 13:53:50

<!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>

结果是:innerHTML属性

innerHTML属性

如果改为:var mychar=document.getElementById("con").innerHTML;

结果就是: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!