1 
      
        2     
       
         3         
           4             
 5             
 6             
 7             
 8         
 9     
        
         
          
编号
          
姓名
          
性别
          
年龄
         
        
       
10 
      

 

window.onload = function(){    var data = [        [1,"王保利","男","10"],        [2,"向兆泽","男","11"],        [3,"李清坤","男","12"],        [4,"陈鹏","男","33"]    ];    //初始化数据  把数据库的数据输出到页面上    initData(data);        //添加事件    添加一行    var addBtnDom = document.getElementById('btn');    addBtnDom.addEventListener('click',addElement);};//运行添加一行函数function addElement(){//    找到table    var tab = document.getElementById('tab');//添加一行                 添加节点    var trDom = document.createElement('tr');    //一共有5个单元个所以循环五次    for(var i=0 ; i<5; i++){//     每循环一次添加一个单元格        var tdDom = document.createElement('td');//单元格的内容为空        tdDom.innerHTML =  " ";//把td放到tr里面        trDom.appendChild(tdDom);    }//把tr放到table里    tab.appendChild(trDom);}/*功能：用来把数据库中的数据放到页面上显示    数据是二维数组[【编号，姓名，性别，年龄】,...]参数：无返回：无*///运行页面加载完成后给的函数function initData(dd){//    找到table    var tab = document.getElementById('tab');    //有多少tr呢  dd.length     for(var i=0 ; i

 

 

 

一、六种JS插入节点的方式

innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement

今天介绍一下appendChild。

1.什么是节点

　　HTML文档中的所有内容都是节点：

　　1.整个文档时一个文档节点。

　　2.每个HTML元素是元素节点。

　　3.HTML元素内的文本是文本节点。

　　4.每个HTML属性是属性节点。

　　5.每个注释是注释节点。

 

 

一、创建节点、追加节点

 

1.createElement创建一个元素节点。

2.appendChild 追加一个节点。

3.createTextNode创建一个文本节点。

二、删除、移除节点

1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。

 

三、替换节点

1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

 

四、查找节点

1、childNodes 包含文本节点和元素节点的子节点。