通过appendChild()方法理解DOM中元素节点、文本节点的关系

appendChild() 方法可以向节点添加最后一个子节点。

下面是例子：

  
    
    


    

        
宫保鸡丁
        
红烧肉
    
    加菜

现在我想通过点击“加菜”按钮，调用addFood()函数给

标签添加一个新的
• 酸菜鱼
。

思路很简单：

先获取

元素节点，单独生成一个新的
• 节点，然后用appendChild()方法把
• 元素插入到
  元素作为最后一个子节点，再给
  • 元素写入“酸菜鱼”文本。

代码如下：

这里需要注意的是，creatElement()方法括号中虽然是引号，但是并不是随便写什么字符串，如果想创建一个

• 标签，就这样在引号里加li：createElement('li')

  此外，这里只能用innerText方法来处理标签内的文本，不能用innerHtml方法。

  考虑到innerText的兼容性，这段js代码还可以这样写：

  这里就很有意思了，直接用"酸菜鱼"字符串通过createTextNode创建一个文本节点，将这个文本节点作为新的

• 元素的子节点，再将新的
• 元素插到
  下作为子节点，都是用appendChild()方法来完成的。

  从这段代码可以看出，文本节点实际上是作为元素节点的子节点存在的。结合一张图来看：

  20160907110147560.png

  DOM中有三类节点，分别是 元素节点，文本节点，属性节点

  元素节点：构成了DOM的基础。文档结构中，是根元素，代表整个文档，其他的还有,,

  ,等等，元素节点之间可以相互包含。
  文本节点：包含在元素节点中。
  属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。

  注意，元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系。