节点操作
在某个子节点的前面插入父节点.insertBefore("新来的","旧节点")
function createLiAtFirst(){ ???var str = prompt("请输入点东西"); ???var oLi = document.createElement("li"); ???oLi.innerHTML = str; ???var oUl = document.getElementById("list"); ???????oUl.insertBefore(oLi,oUl.firstChild);}js中只有insertBefore() 没有insertAfter
自定义函数实现insertAfter的功能
删除节点
1.创建元素节点 document.createElement(标签名)
2.添加到父节点 ??
父节点.appendChild(子节点)
父节点.insertBefore(新节点,旧节点)
3.删除节点父节点.removeChild(子节点)
4.替换节点父节点.replaceChild(新节点,旧节点)
5.克隆节点 ??????????节点.cloneNode() 克隆节点，不克隆子节点
节点.cloneNode(true)克隆节点，克隆子节点
6.创建文本节点 document.createTextNode("文本值")
function deleteDiv(){ ???????????//将div从父节点body中删除 ???????????// 父节点.removeChild(子节点) ???????????var oDiv = document.getElementById("box"); ???????????document.body.removeChild(oDiv); ???????}function replaceDiv(){//将子节点替换成另一个节点// 父节点.replaceChild(新节点,旧节点)var oImg = document.createElement("img");oImg.src = "XX.jpg";oImg.style.width = "400px";oImg.style.height = "400px";var oDiv = document.getElementById("box");document.body.replaceChild(oImg,oDiv);}function cloneDiv(){var oDiv = document.getElementById("box");//节点.cloneNode() 克隆当前的节点// 不传值 默认是false 不会克隆子节点// 传值 true 克隆子节点console.log( oDiv.cloneNode(true) );document.body.appendChild( oDiv.cloneNode(true) );} 创建动态表格
<script type="text/javascript"> ???????function createTable(){ ???????????// 1.获取行列8 ???????????var rows = parseInt( $("rw").value ); ???????????var cols = parseInt( $("cl").value ); ???????????// 2.创建表格 table标签 ???????????????// 2.1 创建table标签，然后添加到body上 ???????????????// 2.2 外层循环创建tr,然后把tr添加table; ???????????????// 2.3 内层循环创建td,给td设置宽高背景色。然后把td添加到tr上 ???????????var oTb = document.createElement("table"); ???????????document.body.appendChild(oTb); ???????????for (var i = 0; i < rows; i++) { ???????????????var oTr = document.createElement("tr"); ???????????????oTb.appendChild(oTr); ???????????????for(var j=0;j<cols;j++){ ???????????????????var oTd = document.createElement("td"); ???????????????????oTd.style.width = "10px"; ???????????????????oTd.style.height = "10px"; ???????????????????oTd.style.backgroundColor = randomColor(); ???????????????????oTr.appendChild(oTd); ???????????????} ???????????} ???????} </script>删除表格中行
for (var i = 0; i < delBtns.length; i++) {//给每一个按钮绑定点击事件的事件处理程序// 元素节点.onclick = 函数名/匿名函数// object 封装属性和方法delBtns[i].onclick =deleteTr;/*delBtns[i].onclick = function(){console.log(this);};*/}function deleteTr(){//按钮-->td-->tr 从 tbody中删除// this 指针，指向自己的所归属的对象console.log(this);//指的是按钮 ??????console.log(this.innerHTML);oTb.lastChild.removeChild(this.parentNode.parentNode);}
JS ?DOM
原文地址：https://www.cnblogs.com/85-Q/p/9626662.html