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');

追加空单元格时内容设为空，否则出现没有高度的一行。