删除节点
<body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> //1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); //2.删除元素 //ul.removeChild(ul.children[0]); //3.点击按钮依次删除里面的孩子 btn.onclick = function () { if (ul.children.length == 0) { this.disabled = true; } else { ul.removeChild(ul.children[0]); } } </script> </body>案例：删除留言案例
<style> textarea { width: 200px; height: 100px; border: 1px solid pink; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } li a { float: right; } </style> </head> <body> <textarea name="" id="">123</textarea> <button>发布</button> <ul> </ul> <script> //1.获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); //2.注册事件 btn.onclick = function () { if (text.value == '') { alert('您没有输入内容'); return false; } else { //console.log(text.value); //(1)创建元素 var li = document.createElement('li'); //先有li 才能赋值 // href='javascript:;' 阻止页面跳转 li.innerHTML = text.value + "<a href='javascript:;' >删除</a>"; //(2)添加元素 //ul.appendChild(li); ul.insertBefore(li, ul.children[0]); //(3)删除元素 删除的是当前链接的li 它的父亲 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { //node.removeChild; 删除的是li 当前a所在的li this.parentNode; ul.removeChild(this.parentNode); } } } } </script> </body>克隆节点：node.cloneNode();
注意：
如果括号参数为空或者为false，则是浅拷贝，即只克隆节点本身，不克隆里面的子节点
括号参数为true 深拷贝 复制标签复制里面的内容
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var ul = document.querySelector('ul'); //1.node.cloneNode(); 括号参数为空或者为false 浅拷贝 只复制标签不复制里面的内容 //1.node.cloneNode(true); 括号参数为true 深拷贝 复制标签复制里面的内容 var lili = ul.children[0].cloneNode(true); ul.appendChild(lili); </script> </body>案例：动态生成表格
<style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; } </style> </head> <body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> //1.先去准备好学生的数据 var datas = [ { name: '魏璎珞', subject: 'JavaScript', score: 100 }, { name: '弘历', subject: 'JavaScript', score: 98 }, { name: '傅恒', subject: 'JavaScript', score: 89 }, { name: '明玉', subject: 'JavaScript', score: 88 } ]; //2. 往tbody 里面创建行： 有几个人（通过数组长度）我们就创建几行 var tbody = document.querySelector('tbody'); for (var i = 0; i < datas.length; i++) { //1.创建tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); //2.行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i] for (var k in datas[i]) { //里面的for循环管列 td //创建单元格 var td = document.createElement('td'); //把对象里面的属性值 给 td //console.log(datas[i][k]); td.innerHTML = datas[i][k]; tr.appendChild(td); } //3.创建有删除2个字的单元格 var td = document.createElement('td'); td.innerHTML = '<a href="javaScript:;">删除</a>'; tr.appendChild(td); } //4.删除操作 开始 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { //点击a 删除 当前a 所在的行（链接的爸爸的爸爸） node.removechild(child) tbody.removeChild(this.parentNode.parentNode); } } //用户管理 角色管理 排班管理 //for(var k in obj){ // k 得到的是属性名 // obj[k] 得到的是属性值 //} </script> </body>三种动态创建元素区别
（1）document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
（2）innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
（3）innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
（4）createElement()创建多个元素效率稍微低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率要比creatElement高
