`

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>
 

分享到:
评论

相关推荐

    JavaScriptDOM模型VirtualDOM.zip

    Virtual DOM 是一个 JavaScript DOM 模型,支持元素创建,区别计算和分支操作,提供高效的渲染。代码示例var h = require('virtual-dom/h'); var diff = require('virtual-dom/diff'); var patch = require...

    文档对象模型(DOM)的帮助文档

    DOM 的基本对象有5个:Document ,Node ,NodeList ,Element 和Attr 。本文档主要描述了这5个文档的主要方法的使用。

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具  BOM(浏览器对象模型)  1. window ...

    DOM基础教程之模型中的模型节点

    可以说,整个DOM模型都是由元素节点(element node)组成 比如文本段落元素“”,无序清单的名称“”,元素节点包含其他元素、 2.文本节点(text node) 例如中的文本“标题1”,中的文字内容,这些具体文本在DOM称为(text...

    txt的意思,来源与实例

    每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面 的内容,正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象 )仅仅有DOM是...

    DOM(document object model)文档对象模型

    本文概述DOM分类,document的方法以及属性、element的方法和属性document获取全局内容和创建全局内容,其中包括了节点属性和节点的相关方法和分类,本文结尾拓展了操作节点的方法和删除空文本节点的相关方法

    DOM基础.doc

    详细介绍 javascript的DOM对象模型

    DOM基础教程之使用DOM

    在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页 对于一个DOM节点node,都有一系列的属性和方法可以使用。常用的有下表。 完善:http://www.w3school.com.cn/xmldom/dom_element.asp 1...

    python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)

    该模型并非只针对 Python,而是一种普通XML 模型。Python 的 DOM 包是基于 SAX 构建的,并且包括在 Python 2.0 的标准 XML 支持里。 一、xml.dom的简单介绍 1、主要方法: minidom.parse(filename):加载读取XML...

    JS中DOM元素的操作等基础知识笔记

    节点树3.DOM选择器:(查询、创建、添加,修改,删除)4.DOM的基本操作①.添加②.插入③.替换④.删除5.DOM节点类型(元素和文本)6.DOM属性节点7.DOM高级操作 1. DOM的概念和作用  DOM 是 JavaScript操作网页的api接口...

    Angular.JS通过指令操作DOM的方法

    为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.element代表AngularJS对jQuery封装的一个子集,称为”jQuery lite...

    dom-utils:ECMAScript 6 DOM实用程序

    let size = getElementSize( element ); 参数 元素可以是DOM元素或选择器字符串。 如果它是选择器字符串,则函数将通过调用document.querySelector来获取元素。 退货 包含框模型值的键值对的对象。 size = { ...

    逆战班:DOM获取元素对象

    DOM: 文档对象模型( Document Object Model ,简称DOM) . DOM树 文档:一个页面就是一个文档,在DOM中使用document表示 元素:页面中的所有标签都是元素,DOM中使用element表示 节点:网页中的所有内容都是节点(标签、...

    js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点。 节点是DOM结构中最基本的组成...要注意:NodeList是‘动态的’,也就是说,每次访问NodeList对象,都会运行一次查询,虽然这样增加了开销,但可以保证我们新添加的

    有关DOM元素与事件的3个谜题

    一、背景知识介绍 通常为DOM元素增加事件有以下几种办法: 1,硬编码形式 2,事件监听 3,JS框架提供的事件绑定 1,硬编码形式,采用的是原始事件(Original Event)的形式。 代码类似如下: 代码如下: &lt;element xss...

    【学习笔记】:DOM对象及事件绑定

    文章目录一、DOM的概念二、DHTML与HTML DOM三、Document对象获取元素方法四、Element对象与属性相关方法五、对DOM对象的操作1、DOM对象的属性2、创建元素3、挂载元素4、删除元素5、克隆元素六、调整元素样式的方式七...

    focus-observer:观察整个文档的焦点变化,支持 ShadowDOM

    焦点观察者随着 ShadowDOM 的引入,为了可访问性功能而跟踪页面上的活动焦点元素变得很复杂。 FocusObserver旨在简化对跨越可访问性树的整个深度的焦点变化的观察,包括阴影根内的树的部分。用法FocusObserver有一个...

    Ajax的知识结构和内容

     DOM表示被加载到浏览器窗口里的当前页面:浏览器向我们提供了当前页面的模型,而我们可以通过JavaScript访问这个模型  DOM把一份文档表示为一棵树  如下的HTML页面:  浏览器加载该页面并将之转换为树形...

    day023-xml解析笔记和代码.rar

    DOM: 文档对象模型 将一个XML(html)文档 的每一个元素解析成java中的一个一个的对象 D Document 文档(XML文档) : 磁盘上面的xml文件 O Object 对象(Java对象) : 把xml文件封装成Java对象 M Model ...

    Ext 学习中文手册

    动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步是 62 模板(Templates)起步 62 第一步 您的HTML模板 62 第二步,将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式化功能 63 正式开始 63 下...

Global site tag (gtag.js) - Google Analytics