DOM创建和删除元素

最新推荐文章于 2024-05-14 20:58:30 发布

zhou_nj

最新推荐文章于 2024-05-14 20:58:30 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/zhou_nj/article/details/120134446

版权

JavaScript createElement DOM操作事件处理删除元素

关键词由CSDN通过智能技术生成

1.createElement()方法，用于创建标签。

<!DOCTYPE html>
<html>
<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></title>
    <style>
        table{
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid #ccc;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <script>
         // 创建一个table对象
         let table = document.createElement('table')
        // 创建一个tr对象
        let tr = document.createElement('tr')
        // 创建五个th对象
        let th1 = document.createElement('th')
        // 在th1里面添加内容
        th1.innerHTML = '学号'
        let th2 = document.createElement('th')
        th2.innerHTML = '姓名'
        let th3 = document.createElement('th')
        th3.innerHTML = '年龄'
        let th4 = document.createElement('th')
        th4.innerHTML = '性别'
        let th5 = document.createElement('th')
        th5.innerHTML = '操作'
        // 将五个th添加到tr中
        tr.appendChild(th1)
        tr.appendChild(th2)
        tr.appendChild(th3)
        tr.appendChild(th4)
        tr.appendChild(th5)
        // 将tr添加到table中
        table.appendChild(tr)
        // 将table表格添加到body中
        document.body.appendChild(table)
    </script>
</body>
</html>

2.删除有两种方式：方式一：自删。方式是：自己.remove()。方式二：通过父级删除自己。方式是：父级标签.removeChild(自己)。

<!DOCTYPE html>
<html>
<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></title>
    <style>
        table{
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid #ccc;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <script>
         // 创建一个table对象
         let table = document.createElement('table')
        // 创建一个tr对象
        let tr = document.createElement('tr')
        // 创建五个th对象
        let th1 = document.createElement('th')
        // 在th1里面添加内容
        th1.innerHTML = '学号'
        let th2 = document.createElement('th')
        th2.innerHTML = '姓名'
        let th3 = document.createElement('th')
        th3.innerHTML = '年龄'
        let th4 = document.createElement('th')
        th4.innerHTML = '性别'
        let th5 = document.createElement('th')
        th5.innerHTML = '操作'
        // 将五个th添加到tr中
        tr.appendChild(th1)
        tr.appendChild(th2)
        tr.appendChild(th3)
        tr.appendChild(th4)
        tr.appendChild(th5)
        // 将tr添加到table中
        table.appendChild(tr)
         // 定义一个学生数组
         let stus = [{
            no:'1001',
            name:'张三',
            age:20,
            gender:'男'
        },{
            no:'1002',
            name:'李四',
            age:22,
            gender:'女'
        },{
            no:'1003',
            name:'王五',
            age:24,
            gender:'男'
        },{
            no:'1004',
            name:'赵六',
            age:26,
            gender:'女'
        }]
         // 循环数组，给数组中的每条数据，添加一个tr，并显示对应的数据
         stus.forEach(s=>{
            // 创建一个tr
            let tr = document.createElement('tr')
            // 创建五个td
            let td1 = document.createElement('td')
            td1.innerHTML = s.no
            let td2 = document.createElement('td')
            td2.innerHTML = s.name
            let td3 = document.createElement('td')
            td3.innerHTML = s.age
            let td4 = document.createElement('td')
            td4.innerHTML = s.gender
            let td5 = document.createElement('td')
            td5.innerHTML = '删除'
            // 给td5注册点击事件
            td5.onclick = function(){
                if(confirm('确定删除吗？')){
                    // 删除当前行
                    table.removeChild(tr)
                }
            }
            // 将五个td添加到tr中
            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            tr.appendChild(td4)
            tr.appendChild(td5)
            // 将tr添加到table中
            table.appendChild(tr)
        })
        // 将table表格添加到body中
        document.body.appendChild(table)
    </script>
</body>
</html>

zhou_nj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM创建和删除元素

1.createElement()方法，用于创建标签。<!DOCTYPE html><html><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">
复制链接

扫一扫