新数据行添加完后，我们插入一个“</table>”结束标签到变量“insertData”。这完成了这个表格，然后我只剩这最后一步来达成我们的目标：我们需要将这个表格放到页面上。幸运的是，我们得感谢innerHTML属性，这很简单。我们通过函数document.getElementById()取得DIV“dataArea”并将变量“insertData”中的HTML插进去。嗯，这个表格冒出来了！

　　我们继续之前……

　　我得指出两点：

　　首先，你会注意到我们并没有使用节点<pets>。这事因为我们只有一个数据组（<pets>）以及后来所有的元素（每一个<pet>元素）；这些子节点包含了不同的数据但它们有相同的名字。在这个例子中，这个节点能够被忽略。然而，将所有的元素<pet>放进<pets>元素还是比较好，而不是让这些<pet>元素自己散放（但仍然在data元素里面）。

　　另外一种方式是给每一个宠物放一个指定的标签，比如：

 <?xml version="1.0" encoding="UTF-8"?>
<data>
  <pets>
    <猫 />
    <狗 />
    <鱼 />
  </pets>
</data> 

　　然后我们能够遍历元素<pets>里的节点。这个processXML函数看起来就像这样：

    function processXML(obj){
      var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
      var dataArrayLen = dataArray.length;
      var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
     + 'Pets</th></tr>';
    for (var i=0; i<dataArrayLen; i++){
       if(dataArray[i].tagName){
          insertData += '<tr><td>' + dataArray[i].tagName + '</td></tr>';
       }
    }
    insertData += '</table>';
    document.getElementById ('dataArea').innerHTML = insertData;
  }

　　这里所作的修改就是我们指向了<pets>组元素（这个“[0]”意味这是第一个，即使它就是唯一的那一个）以及它的子节点（元素<猫 />，<狗 />，<鱼 />）。因为文本元素分割了这几个元素（空格被认为是一个节点），我们需要确定只有那些有标签名的节点（嗯，也就是只有标签）通过。然后我们输出每一个标签的名字。因为每一个标签名是一个宠物，我们不需要取得每一个节点的数据－节点名本身已经足够。去看一下它是怎么工作的吧。

　　还有另外一种方式来完成我们上面的工作，就是给每一个<pet>节点设置一个属性值。你的XML文档看起来就像这样：

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <pets>
    <pet type="猫" />
    <pet type="狗" />
    <pet type="鱼" />
  </pets>
</data> 

　　你只需要稍微修改一下你的processXML函数，它变成这样子了：

    function processXML(obj){
      var dataArray = obj.getElementsByTagName('pet');
      var dataArrayLen = dataArray.length;
      var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'