通过appendChild()方法理解DOM中元素节点、文本节点
2018-05-09 本文已影响29人
剑老湿
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之类的。
注意，元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系。
