JS study notes 12-addition, deletion, modification and investigation

1. Increase

1. Create element node document.createElement()

(1) document.createElement can be used to create an element node object.
(2) It needs a tag name as a parameter, it will create an element node object based on the tag name, and return the created object as the return value.var li=document.createElement("li")

2. Create a text node object document.createTextNode()

(1) Can be used to create a text node object
(2) Need a text content as a parameter, will create a text node based on the content, and return the new node.var gxText=document.createTextNode("广州")

3. Add a new child node appendChild() to the parent node

(1) Add the text node to the element node
(2) Usage: parent node.appendChild (child node);li.appendChild(gxText)

4. Insert a new child node before the specified child node insertBefore()

(1) insertBefore() can insert a new child node before the specified child node
(2) Syntax: parent node. insertBefore (new node, old node);

5. The new node replaces the old node replaceChild()

(1) You can use the specified child node to replace the existing child node
(2) Syntax: parent node.replaceChild (new node, old node)city.replaceChild(li,bj)

6. Remove the child node removeChild()

(1)removeChild() can delete a child node
(2) Syntax:
parent
node.removeChild(child node) child node.parentNode.removeChild(child node)
city.removeChild(bj)
(3) When you don’t know who the parent node is, you can get it first Parent node, you don’t need to get the parent node first.bj.parentNode.removeChild(bj)

7. Add new nodes through innerHTML

(1) Using innerHTML can also complete the related operations of DOM addition, deletion and modification.
(2) Generally, it will be combined with the above method.
(2) Syntax: parent node.innerHTML+="new node"

Two, delete

1. Delete employee information

(1) After clicking the hyperlink, delete the information of an employee.
After clicking the hyperlink, the hyperlink will jump to the page. This is the default behavior of the hyperlink, but at this time, we do not want the default behavior. Return false to cancel the default behavior.

//删除tr的响应函数
function delA(){
    
    
var tr=this.parentNode.parentNode;

//获取要删除的员工的名字
var name=tr.getElementByTagName("td")
[0].innerHTML;
//var name=tr.children[0].innerHTML;

//删除之前弹出提示框
var flag=confirm("确认删除"+name+"吗？？");

//如点击确认
if(flag){
    
    
  //删除tr
  tr.parentNode.removeChild(tr);
}
}

//获取所有的超链接
var allA=document.getElementByTagName("a");

//为每一个超链接都绑定一个单击响应函数
for(var i=0;i<allA.length;i++){
    
    

/*for循环会在页面加载完成之后立即执行
而响应函数会在超链接被点击时才执行
当响应函数执行时，for循环早已执行完毕
*/
allA[i].onclick=delA;

//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接，那么this就是谁
//通过this去获取this所在的那一行元素，然后进行删除

}

(2) The confirm() user pops up a prompt box for confirm and cancel buttons, which requires a character string as a parameter, and the character string will be used as a prompt message. Returns true if the user clicks OK, false if cancel

Three, add

1. Add employee information
(1) After clicking the button, add employee information to the form

//获取用户添加的员工信息
//获取员工的名字
var name=document.getElementById("empName").value;
//获取email,salary
var email=document.getElementById("email").value;
var salary=document.getElementById("salary").value;

//需要将获取到的信息保存到tr中
//创建一个tr
var tr=ducument.createElement("tr");

//创建四个td
var nameTd=docuemnt.createElement("td");
var emailTd=docuemnt.createElement("td");
var salaryTd=docuemnt.createElement("td");
var aTd=docuemnt.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加入到tr中去
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);

//将文本节点添加到td中去
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
a.appendChild(delText);

//将a元素加入到tr中
aTd.appendChild(a);

//向a中添加href属性
a.href="javascript:;";

//为新添加的a帮绑定一次单击响应函数
a.onclick=delA;

//获取table
var employeeTable=document.getElemrntById("employeeTable");

//获取employeeTable中的tbody
var tbody=employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到table中
tbody.appendChild(tr);

The second method of adding

//设置tr中的内容
tr.innerHTML="<td>"+name+"</td>"+
             "<td>"+email+"</td>"+
             "<td>"+salary+"</td>"+
             "<td><a href="javascript:;">Delete</a></td>"
var a=tr.getElementsByTagName("a")[0];
a.onclick=delA;