百度IFE学习笔记（二）js 添加DOM子节点

需求页面如下：

<ul id="resort">
<!--
<li>第一名：北京空气质量：<b>90</b></li>
<li>第二名：北京空气质量：<b>90</b></li>
<li>第三名：北京空气质量：<b>90</b></li>
-->

</ul>

js添加子节点：

var ul=document.getElementById("resort");
for(i=0;i<data.length;i++){
var text_li = "第"+(i+1)+"名："+data[i][0]+"空气质量：";
var node_li=document.createElement("li");
var textnode_li = document.createTextNode(text_li);
node_li.appendChild(textnode_li);
var node_b=document.createElement("b");
var text_b=data[i][1];
var textnode_b = document.createTextNode(text_b);
node_b.appendChild(textnode_b);
node1.appendChild(node_b);
ul.appendChild(node_li);
}

分析：（子节点需创建并绑定到父节点，才能在页面中显示）

DOM结构图：



createElement ：创建元素节点

createTextNode：创建文本节点

appendChild：向父节点的子节点序列的末尾添加一个子节点