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

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

下面是例子:

<html>
<head>  
    <meta charset="utf-8">
    <title>点菜</title>
</head>
<body>
    <ul id="foodMenu">
        <li>宫保鸡丁</li>
        <li>红烧肉</li>
    </ul>
    <button onclick="addFood()" >加菜</button>
</body>
</html>

现在我想通过点击“加菜”按钮,调用addFood()函数给<ul>标签添加一个新的<li>酸菜鱼</li>。

思路很简单:

先获取<ul>元素节点,单独生成一个新的<li>节点,然后用appendChild()方法把<li>元素插入到<ul>元素作为最后一个子节点,再给<li>元素写入“酸菜鱼”文本。

代码如下:

<script type="text/javascript">
            function addFood(){
                var foodMenu = document.getElementById('foodMenu');
                var newfood = document.createElement('li');
                foodMenu.appendChild(newfood);
                newfood.innerText = "酸菜鱼";
            }
</script>

这里需要注意的是,creatElement()方法括号中虽然是引号,但是并不是随便写什么字符串,如果想创建一个<li>标签,就这样在引号里加li:createElement('li')

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

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

<script type="text/javascript">
        function addFood(){
            var foodMenu = document.getElementById('foodMenu');
            var newfood = document.createElement("li");
            var foodTxt = document.createTextNode("酸菜鱼");
            newfood.appendChild(foodTxt);
            foodMenu.appendChild(newfood);
        }
</script>

这里就很有意思了,直接用"酸菜鱼"字符串通过createTextNode创建一个文本节点,将这个文本节点作为新的<li>元素的子节点,再将新的<li>元素插到<ul>下作为子节点,都是用appendChild()方法来完成的。

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

20160907110147560.png

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

元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>,<span>等等,元素节点之间可以相互包含。
文本节点:包含在元素节点中。
属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。

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

推荐阅读更多精彩内容