DOM动态添加HTML节点 appendChild、removeChild

1、函数语法

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

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

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

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

2、实例

2.1 HTML代码

<table id="tabUser" border="1"></table>

<input type="button" id="btnShowData" onclick="ShowData()" value="显示数据" />
<input type="button" id="btnRemoveData" onclick="RemoveData()" value="清空数据" />

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;
}