DOM模型动态增加element
为列表框，下拉菜单增加选项
<%@ 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>?