为啥innerHTML不生效呢。-慕课网

首页课程实战体系课手记专栏慕课教程

为啥innerHTML不生效呢。

来源：9-9 访问子节点的第一和最后项

榛子泉

2015-09-22 23:09

如题。。。。

写回答关注

7回答

慕少8622884

2016-01-06 23:09:43

这是我的代码与答案，楼主可以参考一下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild + "<br>");
for (var i=0;i<x.childNodes.length;i++){
document.write("  我是第" + i + "个：" + x.childNodes[i] + "<br>");
}
document.write(x.lastChild + "<br>");
document.write("首节点：" + x.firstChild.innerHTML+"<br>");
document.write("末节点：" + x.lastChild.nodeName+"<br>");
</script>
</body>
</html>

答案：
javascript
jQuery
PHP
[object Text]
  我是第0个：[object Text]
  我是第1个：[object HTMLParagraphElement]
  我是第2个：[object Text]
  我是第3个：[object HTMLDivElement]
  我是第4个：[object Text]
  我是第5个：[object HTMLHeadingElement]
  我是第6个：[object Text]
[object Text]
首节点：undefined
末节点：#text
楼主出现的那种情况可能是浏览器兼容性的问题，楼主可以换个浏览器试试！

0 0
慕姐3237341

2015-12-07 12:04:45

浏览器兼容问题，不是ie9的浏览器会认为div标签后有个空节点，所以x.firstChild是个空节点没有任何内容

0 0
wlf1112

2015-12-02 13:49:28

上面的回答有问题，使用innerHTML也是可以的，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write("div的第一个子节点为："+x.firstChild.innerHTML+"<br>");
document.write("div的最后一个节点为："+x.lastChild.nodeName+"<br>");
</script>
</body>
</html>
执行结果为：
javascript
jQuery
PHP
div的第一个子节点为：javascript
div的最后一个节点为：H5
要让innerHTML执行出结果，需要把<body>...</body>代码中的空格都去掉，如果不去掉，执行结果为：
javascript
jQuery
PHP
div的第一个子节点为：javascript
div的最后一个节点为：H5

1 1

wlf111...

javascript jQuery PHP div的第一个子节点为：undefined div的最后一个节点为：#text

2015-12-02 13:49:56

共 1 条回复 >
wlf1112

2015-12-02 12:00:48

innerHTML的用法一般为document.getElementById("id").innerHTML;

0 0
甲o甲

2015-11-10 15:19:39

兼容性的问题不换行就好了不信你输出nodeName看看firstChild这个node是不是P嘛

0 0
Lzzzzzzzz_M

2015-11-09 09:49:34

百度了一下貌似节点没有innerHTML的属性。。

0 0
Q南极熊Q

2015-09-22 23:36:46

浏览器版本问题，你把标签不换行试试看

0 0