DOM增删修
１.创建元素节点和文本节点
| 方法 | |
|---|---|
document.createElement("标签名"); |
创建元素节点 |
document.createTextNode("文本信息"); |
创建文本节点 |
父节点.appendChild("传入需要添加节点"); |
把新的子节点添加到指定节点中 |
**案例1：**创建一个"广州"节点,添加到#city下
方式一：
//创建一个"广州"节点,添加到#city下
// 第一步：为btn01绑定单击事件
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// 第二步：创建广州节点 `<li>广州</<li>`
// 2.1创建`li`元素节点
var li = document.createElement("li");
// 2.2创建广州文本节点
var textNode = document.createTextNode("广州");
// 2.3将textNode设置li的子节点中
li.appendChild(textNode);
/**
* appendChild("传入要添加的子节点");
* 语法：
* 父节点.appendChild("子节点");
*/
// 第三步：获取city对象
var city = document.getElementById("city");
// 第四步：将child添加到city节点中
var text = city.appendChild(li);
alert(text);
}
方式二：
// 创建一个"湛江"节点,添加到#city下
// 第一步：为`btn07`绑定单击事件
var btn07 = document.getElementById("btn07");
btn07.onclick = function () {
// 第二步：获取`city`对象
var city = document.getElementById("city");
// 第三步：创建`li`对象节点
var li = document.createElement("li");
// 第四步：添加文本节点
li.innerHTML = "湛江";
// 第五步：添加到`city`下
city.appendChild(li);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮创建有文本的按钮</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
};
</script>
</body>
</html>
**案例2：**将"广州"节点插入到#bj前面
| 方法 | 描述 |
|---|---|
父节点.insertBefore("新节点","旧节点"); |
可以在指定的子节点前插入新的子节点 |
//将"广州"节点插入到#bj前面
// 第一步：为`btn02`绑定单点事件
var btn02 = document.getElementById("btn02");
btn02.onclick = function (newChild, refChild) {
// 第二步：创建`广州节点`
// 2.1 创建`<li></li>`节点
var li = document.createElement("li");
// 2.2 创建`广州`文本节点
var textNode = document.createTextNode("广州");
// 2.3 将`广州`文本节点添加到`li`节点中
li.appendChild(textNode);
// 第三步：获取`bj`对象
var bj = document.getElementById("bj");
// 第四步：获取父节点
var city = document.getElementById("city");
// 第四步：将`<li>广州</li>`插入到`bj`前
city.insertBefore(li, bj);
};
**案例3：**使用"广州"节点替换#bj节点
| 方法 | 描述 |
|---|---|
父节点.replaceChild("新节点","旧节点"); |
可以使用指定的子节点替换已经有的子节点 |
//使用"广州"节点替换#bj节点
// 第一步：为`btn03`绑定单击事件
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
// 第二步：创建广州节点
// 2.1 创建`<li></li>`
var li = document.createElement("li");
// 2.2 创建文本节点
var textNode = document.createTextNode("广州");
// 2.3 将文本节点添加到`li`中
li.appendChild(textNode);
// 第三步：获取`bj`对象和`city`对象
var bj = document.getElementById("bj");
var city = document.getElementById("city");
// 第四步；调用方法替换
city.replaceChild(li,bj);
};
**案例4：**删除#bj节点
| 方法 | 描述 |
|---|---|
父节点.removeChild("子节点"); |
删除子节点 |
//删除#bj节点
// 第一步：为`btn04`绑定单击事件
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
// 第二步：获取`city`和`bj`节点
var bj = document.getElementById("bj");
var city = document.getElementById("city");
// 第三步：删除子节点
city.removeChild(bj);
};
案例5：读取#city内的HTML代码
//读取#city内的HTML代码
// 第一步：为`btn05`绑定单击事件
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
// 第二步：获取`city`对象
var city = document.getElementById("city");
// 第三步：获取`city`内的`HTML`代码
alert(city.innerHTML);
};
案例6：设置#bj内的HTML代码
//设置#bj内的HTML代码
// 第一步：为`btn06`绑定单击事件
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
// 第二步：获取`bj`对象
var bj = document.getElementById("bj");
// 第三步：设置`bj`内的`HTML`代码
bj.innerHTML = "海康";
};
注意是：在a标签中，返回false后，禁用掉a跳转功能或<a href="javascript:;">禁用跳转功能</a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
/*
* 删除tr的响应函数
*/
function delA() {
//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接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;
};
window.onload = function() {
/*
* 点击超链接以后，删除一个员工的信息
*/
//获取所有额超链接
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for(var i = 0; i < allA.length; i++) {
allA[i].onclick = delA;
}
/*
* 添加员工的功能
* - 点击按钮以后，将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
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>[email protected]</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);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td>
<a href="deleteEmp?id=002">Delete</a>
</td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td>
<a href="deleteEmp?id=003">Delete</a>
</td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>