JS節點操作

一、六種JS插入節點的方式

innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement

今天介紹一下appendChild。

1.什么是節點

　　HTML文檔中的所有內容都是節點：

　　1.整個文檔時一個文檔節點。

　　2.每個HTML元素是元素節點。

　　3.HTML元素內的文本是文本節點。

　　4.每個HTML屬性是屬性節點。

　　5.每個注釋是注釋節點。

 下面做一個表格，只在html里寫表頭，數據由js導入，並能夠在單元格內編輯，刪除行，添加行

<!--建立表格-->
<table>
    <tr>
        <th>年級</th>
        <th>性別</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
</table>
<button onClick="tj()">添加一行</button>

window.onload = function (){
    //定義數組
    var tabArr = [
        [2,'男','小明'],
        [5,'女','小紅'],
        [4,'女','小藍']
    ];
    //初始化數據
    dataIn(tabArr);
}
function dataIn(aa){
    //獲取表格
    var table = document.getElementsByTagName('table')[1];
    //循環給table加tr
    for(var i = 0; i < aa.length; i ++){
        //創建行
        var tr = document.createElement('tr');
        //給每行附一個標志數
        tr.setAttribute('xb',i);
        for(var j = 0; j < aa[i].length; j ++){
            //創建列
            var td = document.createElement('td');
            td.innerHTML = aa[i][j];
            //單元格添加可編輯事件
            td.setAttribute('contenteditable','true');
            tr.appendChild(td);
        }
        //創建單元格
        var td = document.createElement('td');
        //創建按鈕
        var sc = document.createElement('button');
        //刪除按鈕添加事件
        sc.addEventListener('click',del);
        //刪除添加標志數
        sc.setAttribute('xb',i);
        //按鈕顯示修改 刪除
        sc.innerHTML = "刪除";
        //按鈕追加
        td.appendChild(sc);
        //單元格追加
        tr.appendChild(td);
        table.appendChild(tr);
    }
}
//刪除行
function del(){
    //獲取按鈕的下標
    var xb = this.getAttribute('xb');
    //獲取行數組
    var trArr = document.getElementsByTagName('tr');
    //循環遍歷行
    for(var i = 0; i < trArr.length; i++){
        //如果行下標和刪除下標相同
        if(trArr[i].getAttribute('xb') == xb){
            //刪除行
            trArr[i].remove();
            break;
        }
    }
}
//添加一行
function tj(){
    //獲取表格
    var table = document.getElementsByTagName('table')[1];
    //獲取行
    var tr = table.getElementsByTagName('tr')[1];
    //獲取列數
    var td = tr.getElementsByTagName('td');
    //創建行
    var    trDom = document.createElement('tr');
    //循環td個數 給tr加td
    for(var i = 0; i < td.length; i++){
        //創建單元格
        var tdDom = document.createElement('td');
        //單元格內容為空
        tdDom.innerHTML = ' ';
        //追加單元格
        trDom.appendChild(tdDom);
    }
    //追加行
    table.appendChild(trDom);
}

window.onload = function (){
    var tabArr = [
        [2,'男','小明'],
        [5,'女','小紅'],
        [4,'女','小藍']
    ];
    //初始化數據
    dataIn(tabArr);
}
function dataIn(aa){
    //獲取表格
    var table = document.getElementsByTagName('table')[1];
    //循環給table加tr
    for(var i = 0; i < aa.length; i ++){
        //創建行
        var tr = document.createElement('tr');
        for(var j = 0; j < aa[i].length; j ++){
            //創建列
            var td = document.createElement('td');
            //單元格里的值
            td.innerHTML = aa[i][j];
            //追加單元格
            tr.appendChild(td);
        }
        //追加行
        table.appendChild(tr);
    }
} 

一、創建節點、追加節點

1.createElement創建一個元素節點。
2.appendChild 追加一個節點。
3.createTextNode創建一個文本節點。
二、刪除、移除節點
1、removeChild(節點) 刪除一個節點，用於移除刪除一個參數（節點）。

其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了。

三、替換節點
1、replaceChild(插入的節點，被替換的節點) ，用於替換節點，接受兩個參數，

第一參數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。

四、查找節點
1、childNodes 包含文本節點和元素節點的子節點。

單元格可編輯

 setAttribute('contenteditable','true');

追加空單元格時內容設為空，否則出現沒有高度的一行。