原生js动态添加节点和删除节点方法

在做Excel上传时，考虑到使用asp编程语言时需要先上传后，再读取，再者asp很多年没有开发了。所以使用前端js技术 xlsx.core.min.js 来读取excel文件并上传。在读取excel数据后，需要动态添加在页面上添加 input，然后提交获取值。

一、JS动态添加节点

1、创建节点为变量：var tr = document.createElement('tr');

2、往节点添加文本内容：tr.innerHTML = ''+ value.id +'

3、把新创建的节点添加到父节点身上： tbody.appendChild(tr);

实例：其中 dataSource 为二维数组

for(var i=0;i<dataSource.length;i++) {
  if(i==0){
    var tr = document.createElement('tr');
    for(var j=0;j<dataSource[0].length;j++) {
      tr.innerHTML += '<td>'+ dataSource[0][j]['name'] +'</td>';
    }
    tr.innerHTML += '</tr>';
    document.getElementById("tableView").appendChild(tr);
  } else {
    var tr = document.createElement('tr');
    for(var j=0;j<dataSource[i].length;j++) {
      let td = '';
      td = '<td><input type="text" name="orderImport[o_dim]" ';
      td += ' value="'+ dataSource[i][j]['name'] +'" /></td>';
      tr.innerHTML += td;
    }
    tr.innerHTML += '</tr>';
    document.getElementById("tableView").appendChild(tr);
  }
}

二、js节点操作

A:动态创建节点的三种方法：

1、document.write()。注意：页面文档流加载完毕，再调用就会导致页面重绘

2、element.innerHTML 将内容写入某个dom节点，不会导致页面重绘

3、document.createElenent() 创建多个元素

B：添加和删除节点方法

1、element.appendChild()，将节点添加到指定父节点的子节点的末尾，什么什么之后类似于push()添加数组元素的方法

2、element.insertBefore(节点，指定预插入的位置)，将节点添加到指定父节点的指定子节点的前面，什么什么之前类似于unshift()方法;

3、element.removeChild（删的节点）用于删除节点，并且会返回一个值