DOM的修改
【摘要】 DOM的修改 appendChild()用于给一个节点添加子节点list.appendChild(li) insertAdjacentElement()可以向元素的任意位置添加元素 两个参数：1.要添加的位置 2.要添加的元素beforeend 标签的最后 afterbegin 标签的开始beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟...
DOM的修改
appendChild()
用于给一个节点添加子节点
list.appendChild(li)
insertAdjacentElement()
可以向元素的任意位置添加元素
两个参数：
1.要添加的位置 2.要添加的元素
beforeend 标签的最后 afterbegin 标签的开始
beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟元素）
list.insertAdjacentElement(“afterend”, li)
通过点击按钮，往页面中添加内容，修改内容，删除内容
<body>
<button id="btn01">按钮1</button>
<button id="btn02">按钮2</button>
<hr>
<ul id="list">
<li id="swk">孙悟空</li>
<li id="zbj">猪八戒</li>
<li id="shs">沙和尚</li>
</ul>
<script>
//点击按钮后，向ul中添加一个唐僧
//获取ul
const list = document.getElementById('list')
//获取按钮
const btn01 = document.getElementById('btn01')
btn01.onclick = function(){
//<li id='shs'>沙和尚</li>
//创建一个li
const li = document.createElement('li')
//向li中添加文本
li.textContent = '唐僧'
//给li添加id属性
li.id = 'ts'
list.insertAdjacentHTML('beforeend',"<li id='bgj'>白骨精</li>")
}
const btn02 = document.getElementById("btn02")
btn02.onclick = function(){
// 创建一个蜘蛛精替换孙悟空
const li = document.createElement("li")
li.textContent = "蜘蛛精"
li.id = "zzj"
// 获取swk
const swk = document.getElementById("swk")
// replaceWith() 使用一个元素替换当前元素
// swk.replaceWith(li)
// remove()方法用来删除当前元素
swk.remove()
}
</script>
</body>
练习
可以在表格中插入数据，删除数据
容易被插入攻击的写法：
//这种写法，容易别xss攻击
tbody.insertAdjacentHTML(
'beforeend',
`
<tr>
<td>${name}</td>
<td>${email}</td>
<td>${salary}</td>
<td><a href="javascript:;">删除</a></td>
`
)
区别于alert的弹窗
含有确定和取消两个按钮
//弹出一个友好的提示
if(confirm('确认要删除【' + empName + '】吗？')){
//删除tr
tr.remove()
}
本练习中的超链接，我们是不希望发生跳转，但是跳转行为是超链接的默认行为
只要点击超链接就会触发页面的跳转，事件中可以通过取消默认行为来阻止超链接的跳转
使用return false来取消默认行为，只在 xxx.xxx = function(){}这种形式绑定的事件中才适用 -----> return false
<a href="javascript:;">//可以阻止链接的跳转
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
width: 400px;
margin: 100px auto;
text-align: center;
}
table {
width: 400px;
border-collapse: collapse;
margin-bottom: 20px;
}
td,
th {
border: 1px black solid;
padding: 10px 0;
}
form div {
margin: 10px 0;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
//点击删除超链接后，删除当前的员工信息
function delEmpHandler(){
// 本练习中的超链接，我们是不希望发生跳转，但是跳转行为是超链接的默认行为
// 只要点击超链接就会触发页面的跳转，事件中可以通过取消默认行为来阻止超链接的跳转
// 使用return false来取消默认行为，只在 xxx.xxx = function(){}这种形式绑定的事件中才适用
// return false
// 删除当前员工 删除当前超链接所在的tr
// console.log(this)
// this表示当前点击的超链接
const tr = this.parentNode.parentNode
//获取要删除的员工的姓名
// const empName = tr.getElementsByTagName("td")[0].textContent
const empName = tr.firstElementChild.textContent//两种方式都可以
//弹出一个友好的提示
if(confirm('确认要删除【' + empName + '】吗？')){
//删除tr
tr.remove()
}
}
//获取所有的超链接
const links = document.links
//为他们绑定单级响应函数
for(let i = 0; i < links.length; i++){
links[i].onclick = delEmpHandler
// links[i].addEventListener("click", function(){
// alert(123)
// return false // 无法取消默认行为,依然后进行跳转
// })
}
//点击按钮后，将用户的信息插入到表格中
//获取tbody
const tbody = document.querySelector('tbody')
const btn = document.getElementById("btn")
btn.onclick = function(){
//获取用户输入的数据
const name = document.getElementById('name').value
const email = document.getElementById('email').value
const salary = document.getElementById('salary').value
//将获取到的数据设置DOM对象
/*
<tr>
<td>孙悟空</td>
<td>swk@hgs.com</td>
<td>10000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
*/
// 创建元素
const tr = document.createElement("tr")
// 创建td
const nameTd = document.createElement("td")
const emailTd = document.createElement("td")
const salaryTd = document.createElement("td")
// 添加文本
nameTd.innerText = name
emailTd.textContent = email
salaryTd.textContent = salary
// 将三个td添加到tr中
tr.appendChild(nameTd)
tr.appendChild(emailTd)
tr.appendChild(salaryTd)
tr.insertAdjacentHTML("beforeend", '<td><a href="javascript:;">删除</a></td>')
tbody.appendChild(tr)
/* //这种写法，容易别xss攻击
tbody.insertAdjacentHTML(
'beforeend',
`
<tr>
<td>${name}</td>
<td>${email}</td>
<td>${salary}</td>
<td><a href="javascript:;">删除</a></td>
`
) */
// 由于上边的超链接是新添加的，所以它的上边并没有绑定单级响应函数，所以新添加的员工无法删除
// 解决方式：为新添加的超链接单独绑定响应函数
links[links.length-1].onclick = delEmpHandler
}
})
</script>
</head>
<body>
<div class="outer">
<table>
<tbody>
<tr>
<th>姓名</th>
<th>邮件</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>孙悟空</td>
<td>swk@hgs.com</td>
<td>10000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>猪八戒</td>
<td>zbj@glz.com</td>
<td>8000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>沙和尚</td>
<td>shs@lsh.com</td>
<td>6000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
<form action="#">
<div>
<label for="name">姓名</label>
<input type="text" id="name">
</div>
<div>
<label for="name">邮件</label>
<input type="email" id="email">
</div>
<div>
<label for="salary">薪资</label>
<input type="number" id="salary">
</div>
<button id="btn" type="button">添加</button>
</form>
</div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）