【JavaScript】43_DOM编程：DOM修改与demo
10、DOM的修改
appendChild()
用于给一个节点添加子节点
list.appendChild(li)
insertAdjacentElement()
可以向元素的任意位置添加元素
两个参数：
1.要添加的位置 2.要添加的元素
beforeend 标签的最后 afterbegin 标签的开始
beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟元素）
list.insertAdjacentElement(“afterend”, li)
通过点击按钮，往页面中添加内容，修改内容，删除内容
<body>
<button id="btn01">按钮1button>
<button id="btn02">按钮2button>
<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
const li = document.createElement('li')
//向li中添加文本
li.textContent = '唐僧'
//给li添加id属性
li.id = 'ts'
list.insertAdjacentHTML('beforeend',"白骨精 ")
}
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>
11、练习
可以在表格中插入数据，删除数据
容易被插入攻击的写法：
//这种写法，容易别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
//可以阻止链接的跳转
完整代码
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>Documenttitle>
<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对象
/*
孙悟空
[email protected]
10000
删除
*/
// 创建元素
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", '删除 ')
tbody.appendChild(tr)
/* //这种写法，容易别xss攻击
tbody.insertAdjacentHTML(
'beforeend',
`
${name}
${email}
${salary}
删除
`
) */
// 由于上边的超链接是新添加的，所以它的上边并没有绑定单级响应函数，所以新添加的员工无法删除
// 解决方式：为新添加的超链接单独绑定响应函数
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>[email protected]td>
<td>10000td>
<td><a href="javascript:;">删除a>td>
tr>
<tr>
<td>猪八戒td>
<td>[email protected]td>
<td>8000td>
<td><a href="javascript:;">删除a>td>
tr>
<tr>
<td>沙和尚td>
<td>[email protected]td>
<td>6000td>
<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>
你可能感兴趣的:(JavaScript,javascript,前端,html,vue.js,node.js)