前言：
此时我们对“节点操作有几种”大致比较关切，大家都需要知道一些“节点操作有几种”的相关文章。那么小编也在网上搜集了一些有关“节点操作有几种””的相关文章，希望我们能喜欢，大家一起来学习一下吧！5.节点操作
5.4创建节点
5.5添加节点
<body> <ul></ul> <script> //1.创建节点元素节点 var li = document.createElement('li'); //2.添加节点 node.appendChild(child) node 父级 child 是子级 var ul = document.querySelector('ul'); ul.appendChild(li); //3.添加节点 node.insertBefore(child,指定元素)； var lili = document.createElement('li'); ul.insertBefore(lili,ul.children[0]); //4.我们想要页面添加一个新的元素：1.创建元素 2.添加元素 </script></body>发布评论案例：
案例分析：
核心思路:点击按钮之后,就动态创建一个li ,添加到ul里面。创建li的同时,把文本域里面的值通过li.innerHTML赋值给li如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore
<style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } </style></head><body> <textarea name="" id=""></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{ //(1)创建元素 var li = document.createElement('li'); li.innerHTML = text.value; //(2)添加元素 ul.insertBefore(li,ul.children[0]); } } </script></body>删除留言案例：
案例分析：
//2.注册事件 btn.onclick = function(){ if(text.value == ''){ alert('您没有输入内容'); return false; }else{ //(1)创建元素 var li = document.createElement('li'); li.innerHTML = text.value + "<a href='javascript:'>删除</a>"; //(2)添加元素 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(child);删除的是li当前a所在的li this.parentNode; ul.removeChild(this.parentNode); } }删除节点案例：
<body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> //1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); //2.删除元素 node removeChild(child) // 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>5.简单类型传参
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。
5.6复制节点（克隆节点）
node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
1.如果括号参数为空或者为false , 则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
2.如果括号参数为true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var ul = document.querySelector('ul'); //1. node.cloneNode(); 括号为空或者里面是false浅拷贝 只复制标签不复制里面的内容 //2. 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: 99 },{ name: '赵虎', subject: 'JavaScript', score: 88 }]; //2.往tbody里面创建行:有几个人 (通过数组的长度)我们就创建几行 var tbody = document.querySelector('tbody'); for(var i=0;i<datas.length;i++){ //外面的for循环管行tr //创建tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); //行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for(var k in datas[i]){ //里面的for循环管列td //创建单元格 var td =document.createElement('td'); //把对象里面的属性值 datas[i][k] 给 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 得到的是属性名 // objp[k]得到的是属性值 // } </script></body>5.8三种动态创建元素区别
区别：
1. document .write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #节点操作有几种
