DOM操作HTML实现AJAX的及时性

来源：互联网发布：网络调度是什么意思编辑：程序博客网时间：2024/05/15 21:16

除了使用innerHTML属性方便的控制信息在对应位置动态显示外，为了更加灵活地控制Web页面的动态效果，往往需要借助DOM提供的方法和属性对HTML文档进行操作，下面给出一个笔者刚刚做的一个动态添加的效果，当用户单击确认添加按钮时，在下方的表格里马上出现新增的信息，单击删除按钮时，马上删对应的信息，

对应的源码如下：

<head>

</head>

// 增加成员函数

function addSort() {

var name = document.getElementById("name").value;

if(name == "" ) {

return;

}

var row = document.createElement("tr");

row.setAttribute("id", name);

var cell = document.createElement("td");

cell.appendChild(document.createTextNode(name));

row.appendChild(cell);

var deleteButton = document.createElement("input");

deleteButton.setAttribute("type", "button");

deleteButton.setAttribute("value", "删除");

deleteButton.onclick = function () { deleteSort(name); };

cell = document.createElement("td");

cell.appendChild(deleteButton);

row.appendChild(cell);

document.getElementById("sortList").appendChild(row);

//清空输入框

document.getElementById("name").value = "";

}

// 删除成员函数

function deleteSort(id) {

if (id!=null){

var rowToDelete = document.getElementById(id);

var sortList = document.getElementById("sortList");

sortList.removeChild(rowToDelete);

}

</script>

<tr>

</td>

</tr>

<tr>

<b>成员信息管理</b>

</td>

</tr>

<tr>

增加新成员:

</td>

</td>

</td>

</tr>

<tr>

成员信息管理:

</td>

</tr>

<tr>

成员名称:

</td>

操作

</td>

</tr>

</table>

，在该页面中当用户填写了新增成员的名称后，单击确认按钮，将调用addSort()函数，该函数首先获取用户填写的新增成员信息，然后依据获取到的信息，借助DOM操作HTML方式生成动态的表格。有兴趣的朋友可直接复制以上代码保存为html文件，使用浏览器直接打开后就可以看到具体的效果！