DOM 的简单操作示例
<html>
<head>
<title>DOM-动态添加和删除元素</title>
<style type="text/css">
body,td,caption,input{
font-size:12px;
}
</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%" border="1" cellspacing="0">
<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>
分享到：
相关推荐
HTML5 DOM（Document Object Model）是一种编程接口，允许程序和脚本动态更新、添加、删除以及改变HTML和XML文档的结构。在Delphi中，通过TWebBrowser控件，开发者可以与HTML5 DOM进行交互，实现诸如加载HTML文档、...
5. 元素操作：包括获取元素对象、添加元素、删除元素、修改元素属性等。 技术要点： * 使用 `findObj` 函数获取元素对象，解决浏览器兼容性问题。 * 使用 `insertRow` 方法添加新行，并设置行的 ID 和内容。 * ...
换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。 模块简介： 1、XMLDOMDocument类: XML对象文档 ->操作创建或读写（元素、节点、属性、注释）等 2、IXMLDOMNode类：每个元素或节点基本都会有的...
在这个示例中，通过获取ul元素（其id为“J_List”）的innerHTML属性，并在其末尾添加新的li元素的HTML代码，从而实现动态添加元素的功能。在创建新li元素时，使用了HTML转义字符来处理包含双引号的字符串，这样做是...
添加元素通常需要先创建一个新的元素节点，然后将其插入到DOM树中的合适位置。常用的方法有： - 创建新元素：使用`document.createElement`方法。 - 插入元素：使用`appendChild`、`insertBefore`等方法。 删除...
DOM4J的核心概念包括元素（Element）、属性（Attribute）、文本（Text）以及命名空间（Namespace）。在XML文档中，元素是构成文档的基本单元，而属性则描述了元素的特性。文本节点则包含了元素中的实际内容，而命名...
博客中可能还会介绍DOM4J的具体示例代码，如`dom4jCode.txt`文件所示，它可能包含创建XML文档、解析XML、添加元素、删除元素和修改元素的实例。通过这些代码，读者可以直观地了解DOM4J的使用方式，从而提升XML处理...
在编程领域，动态添加和删除TEXT框是一种常见的需求，尤其在构建用户界面（UI）时。这通常涉及到前端开发，尤其是HTML、JavaScript和CSS的结合使用。以下将详细阐述如何实现这一功能，并介绍一些关键知识点。 首先...
在提供的`addelement`示例中，可能包含了一个展示如何动态添加元素的实例。例如，用户点击按钮时，新元素可能会被添加到某个列表。这个过程通常涉及事件监听和DOM操作的结合。比如： ```javascript $("#addButton")...
本文通过一个简单的示例介绍了DOM4J的基本使用方法，包括创建XML文档、解析XML文档以及进行简单的XPath查询。DOM4J作为一款优秀的Java XML API，不仅提供了强大的功能，而且易于学习和使用，非常适合处理各种与XML...
在本教程中，我们将深入探讨如何使用DOM4J来执行基本的XML操作，包括添加元素、修改元素、删除元素以及获取元素节点。 1. **添加元素节点** 在DOM4J中，添加元素节点通常涉及创建一个新的`Element`对象，然后将其...
当我们需要在layui表格中实现动态添加和删除元素时，这通常涉及到DOM操作和JavaScript事件处理。 在"layui动态添加表格元素删除代码.zip"这个压缩包中，我们可能找到一个示例，展示如何利用layui的API来动态管理...
- 动态删除元素则是指从当前DOM（文档对象模型）中移除指定的元素。 2. jQuery中动态操作DOM的相关方法： - `append()`：向每个匹配的元素的内部追加内容。 - `prepend()`：向每个匹配的元素内部的开头追加内容...
4. **DOM操作**：jQuery提供了一系列方法来操作DOM，如`.append()`用于在元素末尾添加内容，`.remove()`用于删除元素。在动态添加行时，`.append()`会被用来将新的行元素插入到表格中；而在删除行时，`.remove()`则...
### DOM动态生成与XML DOM的使用 #### 一、引言 随着XML（Extensible Markup Language，可扩展标记语言）在网络开发中的广泛应用，其复杂度也在不断提升。XML作为一种功能强大的新型数据结构，允许开发者将网页的...
在实际开发中，我们可能还需要结合其他DOM操作，如删除元素、替换元素、查找元素等。了解并熟练掌握这些方法，有助于实现动态网页的各种交互效果。 在JavaScript中，元素操作相关的API还有很多，比如`removeChild`...
这个代码示例对于学习和理解JavaScript和jQuery的DOM操作、事件处理以及动态UI构建是非常有价值的。开发者可以通过研究和修改`addel.js`来适应自己的项目需求，创造出更加互动和用户友好的界面。
你可以通过它加载XML文件，或者创建一个空文档并手动添加元素。TXMLElement则代表XML文档中的元素节点，它有子元素、属性和文本等属性。 利用这些类，开发者可以执行以下常见操作： 1. **读取XML文件**：使用...
总结，HTML动态增加和删除元素涉及JavaScript对DOM的操作，包括创建元素、设置元素内容、插入到DOM树、移除元素以及监听和响应用户事件。理解并熟练掌握这些技术，可以极大地提升Web应用的交互性和用户体验。在实际...
这个特性可能通过在每个选项卡上添加一个删除按钮来实现，点击该按钮会触发一个事件处理器，负责移除对应的DOM元素，并调整其他选项卡的状态。 3. **编辑选项卡内容**：编辑选项卡功能允许用户修改已存在标签页的...