为列表框，下拉菜单增加选项
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>为列表框，下拉菜单增加选项</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body id="test">
<script type="text/javascript">
//创建<select .../>对象
var a = document.createElement("select");
//为select对象增加元素
for(var i=0; i<10; i++){
var option = document.createElement("option");
option.innerHTML = '新增的选项' + i;
//将新的选项添加到列表框的最后
//a.add(option,null); //或者
a.appendChild(option);
}
a.size = 5;
//将列表框增加成body元素的子节点
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>为列表框，下拉菜单增加选项</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body id="test">
<input type="button" value="增加" disabled="disabled" id="add" onclick="add();" />
<input type="button" value="删除" id="delete" onclick="del();" />
<div id="target" style="width: 240px;height: 50px;border: 1px solid black;">
被控制的目标元素
</div> <br>
<script type="text/javascript">
var body = document.getElementById("test");
var target = document.getElementById("target");
function add(){
body.appendChild(target);
document.getElementById("add").disabled = "disabled";
document.getElementById("delete").disabled = "";
}
function del(){
body.removeChild(target);
document.getElementById("delete").disabled = "disabled";
document.getElementById("add").disabled = "";
}
</script>
<script type="text/javascript">
//创建<select .../>对象
var a = document.createElement("select");
//为select对象增加元素
for(var i=0; i<10; i++){
var option = new Option('新增的选项'+i);
//直接为指定的选项赋值
a.options[i] = option;
}
a.size = 5;
//将列表框增加成body元素的子节点
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
相关推荐
### BOM和DOM模型 #### 一、BOM与DOM概览 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是非常重要的两个概念，它们构成了前端JavaScript操作网页的基础。 ##### BOM：浏览器对象模型...
### W3C DOM模型参考手册知识点详解 #### 一、前言 本手册是一份针对W3C DOM（文档对象模型）模型的详尽参考指南，重点介绍了Gecko引擎所支持的DOM API特性。这份资料最初来自Mozilla开发网站，但由于各种原因，...
**W3C标准文档——DOM模型对象详解** 在Web开发领域，W3C（World Wide Web Consortium）是一个至关重要的组织，它制定了一系列的开放标准，包括HTML、CSS、XML以及我们今天要讨论的DOM（Document Object Model）。...
总结一下，DOM模型是描述HTML或XML文档结构的数据模型，而Prototype是一个JavaScript库，它提供了一套强大的工具来操作DOM，并实现了面向对象编程的特性。通过学习Prototype，开发者可以更高效地进行前端开发，提升...
3. **节点类型**: 在DOM中，有多种类型的节点，包括元素节点（Element Node）、属性节点（Attribute Node）、文本节点（Text Node）等。例如，`document.documentElement`通常代表HTML文档的根元素 `<html>`。 4. *...
**手写DOM事件模型** 在Web开发中，DOM（Document Object Model）事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件，如点击、鼠标移动、键盘输入等。本篇文章将深入...
1. **实时监听**：`dom-element-watcher`提供了一种机制，可以实时监测DOM树中特定元素的添加、删除、属性变化等事件，确保开发者能即时响应这些变化。 2. **简洁API**：这个库的设计目标是**简单易用**，因此它...
Virtual DOM 是一个 JavaScript DOM 模型，支持元素创建，区别计算和分支操作，提供高效的渲染。代码示例var h = require('virtual-dom/h'); var diff = require('virtual-dom/diff'); var patch = require...
**DOM文档对象模型** ...总的来说，DOM文档对象模型是Web开发中不可或缺的一部分，它为开发者提供了强大的工具来操作和动态更新网页内容。理解和熟练掌握DOM，对于任何前端开发者来说都是至关重要的。
文档对象模型（DOM，Document Object Model）是一种跨平台和语言中立的接口，使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。DOM 主要用于处理 XML 和 HTML 文档，但在本篇文章中我们将聚焦于 XML。 #...
开发者可以使用这些属性和方法遍历DOM树，对节点进行添加、删除、修改等操作。例如，要找到某个ID的元素，可以使用`document.getElementById('id')`；要获取或设置元素的属性，可以使用`element.getAttribute('attr...
不同的厂商可以支持DOM作为其专有数据结构和API的接口，而内容作者可以写入标准的DOM接口，而不是特定产品的API，从而增加了Web上的互操作性。 - **浏览器兼容性**：现代浏览器普遍支持DOM Level 1及其后续版本的...
首先，Dom4j的应用非常简单，只需要对XML-DOM模型有基本的了解就能上手使用。 Dom4j的接口大部分定义在org.dom4j包中，这包括对XML文档节点进行操作的接口。例如，org.dom4j.Document接口代表了整个XML文档对象，...
DOM4J是基于DOM模型的，但相比Java内置的DOM API，DOM4J更轻量级且易于使用。它支持XPath查询，提供了丰富的事件处理机制，并且与JDOM和XOM等其他XML库有良好的互操作性。DOM4J的2.0.3版本修复了一些已知问题，提升...
文档对象模型（DOM）是Web开发中的核心技术，它允许开发者通过JavaScript等脚本语言来动态地访问和修改HTML或XML文档的结构、内容和样式。DOM是一个标准的接口，它将文档表示为一棵由节点组成的树，每个节点代表文档...
首先，DOM4J是一个基于Java的XML处理库，它支持多种XML处理模型，如SAX和DOM。DOM4J的核心特性包括XML文档的构建、解析、查询和修改。它还提供了XPath支持，允许开发者通过简洁的表达式来定位XML文档中的元素。 DOM...
VBScript文档对象模型（DOM）是Web开发中的一个重要概念，特别是在使用VBScript进行客户端脚本编程时。DOM是一个标准，允许编程语言与HTML、XML等结构化文档进行交互，为这些文档提供了一种统一的、独立于平台和语言...
DOM（Document Object Model）是HTML和XML文档的标准表示，它将文档结构转化为一个可编程的树形模型，使得我们可以用JavaScript来动态修改、添加和删除页面内容。 在JavaScript中，DOM操作主要包括以下几个核心知识...