0417 节点的基本操作+ 节点操作表格（添加、删除）

节点创建和追加

　　节点创建

　　　　元素节点：document.createElement(tag标签名称);

　　　　文本节点：document.createTextNode(文本内容);

　　　　属性设置：node.setAttribute(名称，值);

　　节点追加：

　　　　父节点.appendChild(子节点);

　　　　父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边

　　　　父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

节点复制操作

　　被复制节点.cloneNode(true/false);

　　true:深层复制 （本身和内层子节点都复制）

　　false:浅层复制 （本身包括属性复制）

　　<div id=”apple”>hello</div>

节点删除

　　　节点.remove();

　　　父节点.removeChild(子节点);

节点操作表格（添加、删除）

<!--html代码部分-->
<table id="table1" border="1" style="border-spacing: 0">
    <tr>
        <th>编号</th>
        <th>年级</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
</table>
/*js代码部分*/
window.onload = function(){
    //定义一个有数据的数组
    var useArr = [
        [1,"王保利","男","10"],
        [2,"向兆泽","男","11"],
        [3,"李清坤","男","12"],
        [4,"陈鹏","男","33"]
    ];
    //将数据添加进表格
    xsTable(useArr);
}
//将数组中的内容在表格中显示出来
function xsTable(UArr){
    //找到要操作的表格
    var tableX = document.getElementById('table1');
    console.log(tableX);
    //将数组的长度循环一遍，确定tr
    for(var i = 0; i < UArr.length; i++){
        //每循环一次，添加一个tr标签
        var trObj = document.createElement('tr');
        //将数组每个元素的长度循环一遍，确定td
        for(var j = 0; j < UArr[i].length; j++){
            //每循环一次，添加一个td标签
            var tdObj = document.createElement('td');
            //给td赋值
            tdObj.innerHTML = UArr[i][j];
            //将td放到对应的tr里
            trObj.appendChild(tdObj);
        }
        //添加数组中没有的数据（修改、删除）
        var tdObj = document.createElement('td');
//        会多显示一个空的按钮
//        tdObj.innerHTML = '<button id="a">修改<button/>';
//        trObj.appendChild(tdObj);
//        tableX.appendChild(trObj);
        //在td中添加一个修改按钮；
        var buttObj = document.createElement('button');
        buttObj.innerHTML = '修改';
        //将butt添加进td
        tdObj.appendChild(buttObj);
        //在td中添加一个删除按钮
        var buttObj = document.createElement('button');
        buttObj.innerHTML = '删除';
        //添加点击删除事件:用set时需要传值
        //buttObj.setAttribute('onClick','delTr(this)');
        //用add时可直接使用this
        buttObj.addEventListener('click',delTr);
        //将butt添加进td
        tdObj.appendChild(buttObj);
        //将td添加进tr
        trObj.appendChild(tdObj);
        //将tr添加进table
        tableX.appendChild(trObj);
    }
}
//添加一行
function addTr(){
    //找到要操作的表格
    var table2 = document.getElementById('table1');
    //添加一行
    var trObj = document.createElement('tr');
    //通过循环为tr添加做够的td
    for(var i = 0; i < 5; i++){
        //添加一个td
        var tdObj = document.createElement('td');
        //给td添加内容
        tdObj.innerHTML = ' ';
        //将td添加进tr
        trObj.appendChild(tdObj);
    }
    //将tr添加进table
    table2.appendChild(trObj);
}
//删除本行
function delTr(){
    //删除本按钮的上一级td的上一级tr
    this.parentElement.parentElement.remove();
}