新增节点：
/* * document.createElement() * 可以用于创建一个元素节点对象， * 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象， * 并将创建好的对象作为返回值返回 */ var li = document.createElement("li"); /* * document.createTextNode() * 可以用来创建一个文本节点对象 * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 */ var gzText = document.createTextNode("广州"); /* * appendChild() * - 向一个父节点中添加一个新的子节点 * - 用法：父节点.appendChild(子节点); */ li.appendChild(gzText);/* * insertBefore() * - 可以在指定的子节点前插入新的子节点 * - 语法： * 父节点.insertBefore(新节点,旧节点);*/ city.insertBefore(li , bj); /* * replaceChild() * - 可以使用指定的子节点替换已有的子节点 * - 语法：父节点.replaceChild(新节点,旧节点); */ city.replaceChild(li , bj);
/* * removeChild() * - 可以删除一个子节点 * - 语法：父节点.removeChild(子节点); * * 子节点.parentNode.removeChild(子节点); */ //city.removeChild(bj); bj.parentNode.removeChild(bj);
//向city中添加广州 var city = document.getElementById("city"); /* * 使用innerHTML也可以完成DOM的增删改的相关操作 * 一般我们会两种方式结合使用 */ //city.innerHTML += "<li>广州</li>"; //创建一个li var li = document.createElement("li"); //向li中设置文本 li.innerHTML = "广州"; //将li添加到city中 city.appendChild(li);Child(li);
window.onload = function(){ /* * 点击超链接以后，删除一个员工的信息 */ //获取所有额超链接 var allA = document.getElementsByTagName("a"); //为每个超链接都绑定一个单击响应函数 for(var i=0 ; i < allA.length ; i++){ allA[i].onclick = function(){ //点击超链接以后需要删除超链接所在的那行 //这里我们点击那个超链接this就是谁 //获取当前tr var tr = this.parentNode.parentNode; //获取要删除的员工的名字 //var name = tr.getElementsByTagName("td")[0].innerHTML; var name = tr.children[0].innerHTML; //删除之前弹出一个提示框 /* * confirm()用于弹出一个带有确认和取消按钮的提示框 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 * 如果用户点击确认则会返回true，如果点击取消则返回false */ var flag = confirm("确认删除"+name+"吗?"); //如果用户点击确认 if(flag){ //删除tr tr.parentNode.removeChild(tr); } /* * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为， * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为 */ return false; }; } };
/* * 添加员工的功能 * - 点击按钮以后，将员工的信息添加到表格中 */ //为提交按钮绑定一个单击响应函数 var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick = function() { //获取用户添加的员工信息 //获取员工的名字 var name = document.getElementById("empName").value; //获取员工的email和salary var email = document.getElementById("email").value; var salary = document.getElementById("salary").value; //alert(name+","+email+","+salary); /* * <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="javascript:;">Delete</a></td> </tr> 需要将获取到的信息保存到tr中 */ //创建一个tr var tr = document.createElement("tr"); //创建四个td var nameTd = document.createElement("td"); var emailTd = document.createElement("td"); var salaryTd = document.createElement("td"); var aTd = document.createElement("td"); //创建一个a元素 var a = document.createElement("a"); //创建文本节点 var nameText = document.createTextNode(name); var emailText = document.createTextNode(email); var salaryText = document.createTextNode(salary); var delText = document.createTextNode("Delete"); //将文本条件到td中 nameTd.appendChild(nameText); emailTd.appendChild(emailText); salaryTd.appendChild(salaryText); //向a中添加文本 a.appendChild(delText); //将a添加到td中 aTd.appendChild(a); //将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(emailTd); tr.appendChild(salaryTd); tr.appendChild(aTd); //向a中添加href属性 a.href = "javascript:;"; //为新添加的a再绑定一次单击响应函数 a.onclick = delA; //获取table var employeeTable = document.getElementById("employeeTable"); //获取employeeTable中的tbody var tbody = employeeTable.getElementsByTagName("tbody")[0]; //将tr添加到tbodye中 tbody.appendChild(tr); };
转载于:https://www.cnblogs.com/lzb0803/p/9026890.html
相关资源：超强 DOM增删改,js日历综合案例实现