今天看高程，就顺带敲了一下代码，但是结果与想象中是不一样的话不多说，看图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>the first node</p>
</div>
</body>
</html>
<script>
var parentDivNode = document.getElementsByTagName("div")[0]
var p = document.createElement('p'); // 创建p标签
// 第一种方法，在子元素的最后插入一个新的标签
parentDivNode.appendChild(p).innerHTML = "插入的p标签，但是插入到了最后";
// 访问nodeList中的节点 这里有两种方法，一种[] 一种item()
var firstChild = parentDivNode.childNodes[0];
var secondChild = parentDivNode.childNodes.item(1)
var count = parentDivNode.childNodes.length;
</script>本来按照我的想象，应该是两个"p"节点吧，但是，事实是这样的
这是在逗我吗，为什么不按套路出牌，经过查阅，原因如下：
在DOM中实际上有一个叫做textNode的元素，相应的还有document.createTextNode的JS方法，而在IE和Chrome浏览器中会将源代码中的换行符渲染成一个textNode，只是视觉上不可见。
然而，通过childNodes来获取子元素的时候，结果会包含这些textNode，所以会得到题主所见的情况。
而解决方法很简单，主要有两种：
第一，使用children代替childNodes
第二，遍历childNodes，根据nodeType过滤掉textNode。
