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