<div>
  javascript <!--文本节点--> 
  <p>javascript</p><!--p元素节点--> <!--边上还有个空格的文本节点-->
  <div>jQuery</div><!--div元素节点--><!--边上还有个空格的文本节点-->
  <h5>PHP</h5><!--h5元素节点--><!--边上还有个空格的文本节点-->
</div>

主要是因为不同浏览器之间的兼容性。

比如说下面这种情况：

<div>
  javascript  
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>

<div>后面的尖括号到<p>之间的内容算一个文本节点，<p>到</p>之间是一个元素节点，</p>到<div>之间的换行也算一个文本节点，，，</h5>与</div>之间也算一个文本节点。

所以一共会有7个子节点

<div>javascript<p>javascript</p><div>jQuery</div><h5>PHP</h5></div>

如果将代码简化成上面这种形式，则只会有4个子节点。（1个文本节点，3个元素节点）