仿作的一个简单的例子，供和我一样的初学者参考,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用JavaScript实现动态的效果</title>
<script type="text/javascript">
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);
cell=document.createElement("td");
var deleteButton=document.createElement("input");//创建按钮
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","删除");
deleteButton.onclick=function doDelete(){deleteSort(name);}
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
document.getElementById("name").value="";
}
//删除一条记录的函数
function deleteSort(id){
var row = document.getElementById(id);
document.getElementById("sortList").removeChild(row);
}
</script>
</head>
<body>
<table align="center" border="0">
<tr>
<td colspan="2" bgcolor="#C0DCC0" align="center">用户信息管理</td>
</tr>
<tr>
<td>添加用户:</td>
<td><input type="text" id="name"> <input type="button" onclick="addSort();" value="确认添加"></td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="1">
<tr>
<td height="20" valign="top" align="center">用户名称</td>
<td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
这些属性（如`firstChild`, `lastChild`, `childNodes`, `parentNode`, `nextSibling`, `prevSibling`）帮助我们导航和操作DOM树。 2. **DOM操作方法** - `insertBefore()`: 在指定的子节点之前插入一个新的子节点...
通过提供的"HTML DOM 教程.CHM"文件，你可以深入学习DOM的各种操作和技巧，提升你的前端开发能力。这个压缩包可能包含了详细的DOM参考指南、实例代码以及常见问题解答，是你学习DOM的宝贵资源。
JavaScript 中 Dom 操作实例详解 在 JavaScript 中，DOM 操作是指对 HTML 文档中的元素节点进行操作，包括增加、删除、修改和查找节点等。以下是 JavaScript 中 DOM 操作的实例详解。 一、增加节点 增加节点的...
- 创建新节点：`createElement`、`createTextNode`等。 - 插入和删除节点：`appendChild`、`insertBefore`、`removeChild`等。 - 复制和移动节点：`cloneNode`、`appendChild`配合使用可移动节点。 6. **样式...
在本书的前两章中，我们将探讨DOM的基础概念以及如何使用JavaScript操作DOM。 1. **DOM基本概念** - DOM定义：DOM是W3C标准，它将HTML或XML文档解析为一棵由节点构成的树，每个节点代表文档的一部分，如元素、属性...
$child->appendChild($domElement->ownerDocument->createTextNode($value)); } } } $data = ['name' => 'John', 'age' => 30, 'city' => ['name' => 'New York', 'population' => '8.6M']]; $xmlDoc = new DOM...
HTML DOM（文档对象模型）是Web开发中用于访问和操作HTML或XML文档的标准接口。它将HTML页面结构转化为一个可编程的对象模型，使得开发者可以通过JavaScript或其他脚本语言对页面进行动态更新和交互。在这个模型中，...
- 创建新节点：`Document`对象提供了创建新节点的方法，如`createElement()`, `createAttribute()`, `createTextNode()`等。 - 插入节点：使用`appendChild()`, `insertBefore()`或`replaceChild()`方法插入节点。...
### JavaScript 利用 HTML DOM 进行文档操作的方法 #### DOM 概述 文档对象模型 (DOM) 是 W3C 制定的一项标准，用于访问和处理 XML 和 XHTML 等结构化的文档。DOM 提供了一个平台和语言中立的接口，使得程序和脚本...
### 使用DOM合理操作JavaScript #### 一、DOM简介 **DOM**，即**Document Object Model**（文档对象模型），是一项由W3C（World Wide Web Consortium，万维网联盟）组织制定的应用编程接口，用于处理HTML、XML等...
本练习集主要关注如何运用DOM来操作和改变网页内容。下面我们将深入探讨DOM的基本概念、常用方法以及实际应用。 1. DOM基本概念： DOM将HTML或XML文档视为一个可编程的对象集合，每个HTML元素都是一个节点，包括...
- 动态创建元素：使用`createElement()`，`createTextNode()`等方法动态生成元素。 - 元素样式操作：通过`style`属性修改元素的内联样式，或使用`getComputedStyle()`获取计算后的样式。 - 选择器API：`...
### JavaScript：DOM操作与事件处理 #### 一、DOM模型的基本概念 DOM，全称为**文档对象模型**（Document Object Model），是HTML和XML文档的标准API。它将文档表示为节点和对象的树形结构，使得开发人员可以通过...
### JavaScript DOM操作方法详解 #### 一、概述 在JavaScript中，DOM（Document Object Model）是一种处理HTML或XML文档的标准编程接口。通过DOM，开发者能够动态地访问文档中的元素，并可以修改其结构、样式和...
- 增删改：`createElement`和`createTextNode`用于创建新的节点，`appendChild`、`insertBefore`、`replaceChild`和`removeChild`则用于在文档树中添加、插入、替换和删除节点，`setAttribute`用来设置或修改元素的...
根据提供的信息来看，标题与描述似乎并没有明确指出具体的IT或DOM操作相关的内容，这使得从中提取实际的技术知识点变得较为困难。然而，为了尽可能地满足需求，我们可以基于标题中提到的“DOM操作”来构建一系列相关...
在Web开发中，操作DOM（文档对象模型）是进行动态网页设计的基本技能之一。文档对象模型（DOM）是一个跨平台和语言独立的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。本知识点将详细介绍如何使用...