<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>use html as DOM</title>
<mce:script language="javascript" type="text/javascript"><!--
function addUser() {
// get and execute name
var name = $("name").value;
if(name == "") return;
// create a new row
var row = document.createElement("tr");
row.setAttribute("id", name);
// create a new cell (name)
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
// add cell to row
row.appendChild(cell);
// a new cell (delete)
cell = document.createElement("td");
// dim a button
var delButton = document.createElement("input");
delButton.setAttribute("type", "button");
delButton.setAttribute("value", "delete");
delButton.onclick = function () {delUser(name)};
// add button to cell
cell.appendChild(delButton);
// add cell to row
row.appendChild(cell);
// add row to table
$("userList").appendChild(row);
// set textbox ""
$("name").value = "";
}
function delUser(name) {
$("userList").removeChild($(name));
}
function $(id) {
return document.getElementById(id);
}
// --></mce:script>
</head>
<body>
<input type="text" id="name">
<input type="button" value="add" onclick="addUser()"><p/>
<table border="1">
<thead>
<td width="100">name</td><td>delete</td>
</thead>
<tbody id="userList">
</tbody>
</ta
