DOM动态添加HTML节点 appendChild、removeChild

Bertha 。 2021-09-20 05:34 325阅读 0赞

**1、函数语法**

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

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

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

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

**2、实例**

**2.1 HTML代码**

**2.2 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 td1 = document.createElement("td");
            var td2 = document.createElement("td");
    
            td1.innerHTML = userList[i].UserId;
            td2.innerHTML = userList[i].UserName;
            tr.appendChild(td1);
            tr.appendChild(td2);
            tabUser.appendChild(tr);
        }
    }
    
    //清空用户信息
    function RemoveData() {
        var tabUser = document.getElementById("tabUser");
        for (var i = tabUser.childNodes.length - 1; i >= 0; i--) {
            tabUser.removeChild(tabUser.childNodes[i]);
        }
    }
    
    //获取用户列表
    function GetUserList() {
        var userList = [];
        var user1 = { UserId: 1, UserName: "Kevin" };
        var user2 = { UserId: 2, UserName: "Joins" };
        userList.push(user1);
        userList.push(user2);
        return userList;
    }