                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为啥innerHTML不生效呢。

如题。。。。

榛子泉

2015-09-22

源自：JavaScript进阶篇 9-9

关注问题我要回答

4745

操作

收起

7 回答

慕少8622884
2016-01-06

这是我的代码与答案，楼主可以参考一下：

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<p>javascript</p>

<div>jQuery</div>

</div>

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 回复有任何疑惑可以回复我~

收起回答

慕姐3237341
2015-12-07

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

0 回复有任何疑惑可以回复我~

收起回答

wlf1112
2015-12-02

上面的回答有问题，使用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 回复有任何疑惑可以回复我~

收起回答