<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p +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 >您好!</p>
</body>
</html>

 结果就是:null

原因是:代码是顺序执行的,先调用了JavaScript代码,但是这个时候还没有ID为“con”的元素,得到空

----------------------------------------------------------------------------------------------------------------------

innerHTML属性用于获取或替换HTML元素的内容。语法为:object.innerHTML  (注意:区分大小写)

示例:

<html>

<head>.....</head>

<body>

<h2 >原始标题</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!

 

 

 

 

 

相关文章:

  • 2022-12-23
  • 2021-06-11
  • 2021-10-13
  • 2021-11-23
  • 2022-12-23
  • 2021-10-05
  • 2022-01-11
  • 2022-12-23
猜你喜欢
  • 2021-08-17
  • 2022-12-23
  • 2022-03-07
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案