Document动态添加与删除HTML节点：createElement()、appendChild()、removeChild()函数

pan_junbiao

已于 2025-03-31 20:23:13 修改

阅读量1.3w

点赞数

分类专栏：我の原创 JavaScript HTML5 文章标签： html DOM createElement removeChild appendChild

于 2013-07-07 11:26:58 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/9262515

版权

我の原创同时被 3 个专栏收录

598 篇文章

订阅专栏

JavaScript

41 篇文章

订阅专栏

HTML5

24 篇文章

订阅专栏

关于 Window对象和 Document 对象的详细使用，系列文章：

《Window对象的常用属性和方法》

《Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法》

《Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性》

《Document自定义属性：getAttribute()、setAttribute()、removeAttribute()函数》

《Document动态添加与删除HTML节点：createElement()、appendChild()、removeChild()函数》

《JavaScript操作表单元素：文本框、单选按钮、下拉列表、复选框》

《JavaScript实现下拉框动态绑定与级联功能》

《JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()》

《JavaScript弹出框的使用：对话框、确认框、提示框、弹窗操作》

1、函数语法

createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。

appendChild(node)：方法在指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点。

removeChild(node)：方法可从子节点列表中删除某个节点。

elementNode.childNodes：属性返回包含被选节点的子节点的 NodeList。

2、综合实例

【实例】使用 createElement()、appendChild()、removeChild() 函数，实现动态添加和删除表格数据。

执行结果如下：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title>实例</title>

    <!-- CSS样式 -->
    <style scoped>
        table {
            border-collapse: collapse;
            margin-bottom: 10px;
        }

        table,
        table tr th,
        table tr td {
            border: 1px solid #000000;
            padding: 5px;
        }
    </style>

</head>

<body>
    <table id="tabUser">
        <tr>
            <th>编号</th>
            <th>用户名称</th>
            <th>博客信息</th>
            <th>博客地址</th>
        </tr>
    </table>
    <input type="button" id="btnShowData" onclick="ShowData()" value="显示数据" />
    <input type="button" id="btnRemoveData" onclick="RemoveData()" value="清空数据" />
</body>

<script type="text/javascript">

    //显示用户信息
    function ShowData() {
        var userList = GetUserList();
        var tabUser = document.getElementById("tabUser");
        for (var i = 0; i < userList.length; i++) {
            //创建节点
            var tr = document.createElement("tr");
            var td_userId = document.createElement("td");
            var td_userName = document.createElement("td");
            var td_blogName = document.createElement("td");
            var td_blogUrl = document.createElement("td");

            //赋值节点
            td_userId.innerHTML = userList[i].UserId;
            td_userName.innerHTML = userList[i].UserName;
            td_blogName.innerHTML = userList[i].blogName;
            td_blogUrl.innerHTML = userList[i].blogUrl;

            //添加节点
            tr.appendChild(td_userId);
            tr.appendChild(td_userName);
            tr.appendChild(td_blogName);
            tr.appendChild(td_blogUrl);
            tabUser.appendChild(tr);
        }
    }

    //清空用户信息
    function RemoveData() {
        var tabUser = document.getElementById("tabUser");
        for (var i = tabUser.childNodes.length - 1; i > 1; i--) {
            tabUser.removeChild(tabUser.childNodes[i]);
        }
    }

    //获取用户列表
    function GetUserList() {
        var userList = [];
        var user1 = { UserId: 1, UserName: "pan_junbiao的博客", blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" };
        var user2 = { UserId: 2, UserName: "pan_junbiao的博客", blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" };
        var user3 = { UserId: 3, UserName: "pan_junbiao的博客", blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" };
        var user4 = { UserId: 4, UserName: "pan_junbiao的博客", blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" };
        var user5 = { UserId: 5, UserName: "pan_junbiao的博客", blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" };
        userList.push(user1);
        userList.push(user2);
        userList.push(user3);
        userList.push(user4);
        userList.push(user5);
        return userList;
    }

</script>

</html>