一、六种JS插入节点的方式
innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement
今天介绍一下appendChild。
1.什么是节点
HTML文档中的所有内容都是节点：
1.整个文档时一个文档节点。
2.每个HTML元素是元素节点。
3.HTML元素内的文本是文本节点。
4.每个HTML属性是属性节点。
5.每个注释是注释节点。
下面做一个表格，只在html里写表头，数据由js导入，并能够在单元格内编辑，删除行，添加行
| 年级 | 性别 | 姓名 | 操作 |
|---|
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');
追加空单元格时内容设为空，否则出现没有高度的一行。