html元素的动态添加和删除代码实例

日期: 2022-12-08 13:43:45 分类: 前端浏览量：留言数： 98420

本章节分享一段代码实例，它实现了html元素的动态添加或者删除效果。

代码是由原生javascript实现的，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
body, td, caption, input {
  font-size: 12px;
}
.test {
  border-collapse: collapse;
}
.test td {
  border: 1px solid #ccc;
  line-height: 150%;
}
</style>
<script language="javascript">
 var count = 0;
//添加新用户的操作
function addNewUser() {
  //得到文本框对象
  var objName = document.getElementById('name');
  if (objName.value == "") {
    alert("用户名不能为空！");
    objName.focus();
    return;
  }
  else {
    count++;
    //先创建行tr
    var row = document.createElement("tr");
    //设置行对象的ID属性为用户输入的用户名称
    row.setAttribute("id", objName.value + count);
    //创建td对象
    var column = document.createElement("td");
    //td对象下添加子节点 - 内容 TextNode 对象
    column.appendChild(document.createTextNode(objName.value));
    //row对象将td对象添加为子节点对象
    row.appendChild(column);
 
    //再创建删除按钮
    var delBtn = document.createElement("input");
    //类型
    delBtn.setAttribute("type", "button");
    //文本
    delBtn.setAttribute("value", "Delete");
 
    //设置对象的事件处理 - 所调用的函数
    var name = objName.value + count;
    delBtn.onclick = function () { delUser(name); };
 
    column = document.createElement("td");
    column.appendChild(delBtn);
 
    //行对象添加
    row.appendChild(column);
    //添加这一行到tbody中
    document.getElementById('userList').appendChild(row);
    objName.value = "";
  }
}
//删除元素
function delUser(name) {
  if (name != null) {
    var objRow = document.getElementById(name);
    var objTBODY = document.getElementById("userList");
    //删除
    objTBODY.removeChild(objRow);
  }
}
</script>
</head>
<body>
  <table align="center" width="40%" cellspacing="0" class="test">
    <caption align="center">动态添加用户</caption>
    <tr>
      <td>添加新的用户名</td>
      <td>
        <input type="text" id="name">
        <input type="button" value="添 加" onClick="addNewUser()">
      </td>
    </tr>
    <tr>
      <td colspan="2">用户信息</td>
    </tr>
    <!--表格主体-->
    <tbody id="userList"></tbody>
  </table>
</body>
</html>

html元素的动态添加和删除代码实例，这样的场景在实际项目中还是用的比较多的，关于html元素的动态添加和删除代码实例就介绍到这了。

html元素的动态添加和删除代码实例属于前端实例代码，有关更多实例代码大家可以查看。