1. <body>
  2.         <select size="7" style="width: 200px;" id="slt">
  3.             <option value="123">123</option>
  4.         </select><br /><br />
  5.         <input type="text" id="txt"/>
  6.         <input type="button" value="添 加" id="btn"/>
  7.     </body>
  8. </html>
  9. <script>
  10.     var txt = document.getElementById('txt');
  11.     var slt = document.getElementById('slt');
  12.  
  13.     document.getElementById('btn').onclick = function(){
  14.         var opt = document.createElement('option');
  15.         //opt.value = txt.value;
  16.         opt.innerText = txt.value;
  17.         slt.appendChild(opt);
  18.  
  19.         txt.value = '';
  20.     }
  21. </script>

要注意最后的txt.value=‘ ’。提高用户体验。

两个text表格属性相互移动的问题。

  1. <body>
  2.         <select id="left_slt" size="7" multiple="multiple" style="width: 150px;">
  3.             <option>ABC</option>
  4.             <option>123</option>
  5.             <option>xyz</option>
  6.             <option>IJK</option>
  7.         </select>
  8.             <input type="button" id="to_right" value="向右" />
  9.             <input type="button" id="to_left" value="向左" />
  10.             <select id="right_slt" size="7" style="width: 150px;">
  11.         </select>
  12.     </body>
  13. </html>
  14. <script>
  15.     var left_slt=document.getElementById('left_slt');
  16.     var left_right=document.getElementById('left_right');
  17.  
  18.     document.getElementById('to_right').onclick=function(){
  19.         right_slt.appendChild(left_slt.options[left_slt.selectedIndex]);
  20.  
  21.     }
  22.     document.getElementById('to_left').onclick=function(){
  23.         left_slt.appendChild(right_slt.options[right_slt.selectedIndex]);
  24.  
  25.     }
  26. </script>

dom作业的更多相关文章

  1. 9.25 DOM作业

    一<style type="text/css">*{margin:0px auto; padding:0px; font-family:微软雅黑; font-size: ...

  2. 廖雪峰js教程笔记11 操作DOM(包含作业)

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...

  3. [阅读]个人阅读作业week7(200)

    个人作业week7——前端开发感想总结 此次作业因本人(学号1200)长期不上博客所以密码遗忘,输错次数过多账号被锁,所以在SivilTaram同学的博客下挂我的作业,希望助教老师谅解~谢谢! 1. ...

  4. dom解析器机制 web基本概念 tomcat

    0 作业[cn.itcast.xml.sax.Demo2]   1)在SAX解析器中,一定要知道每方法何时执行,及SAX解析器会传入的参数含义 1 理解dom解析器机制 1)dom解析和dom4j原理 ...

  5. 静态Web开发 DOM

    四章 Dom 1节dom中的顶级对象 dom(文档对象模型)js最终是要操作html页面,让html变成DHtml,而操作Html页面就要用到DOMDOM可以吧Html页面模拟成一个对象,如果js只是 ...

  6. DOM&BOM笔记

    day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...

  7. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  8. C语言程序设计第六次作业——循环结构（2）

    C语言程序设计第六次作业--循环结构(2) 之前的博客园图片没处理好,对大家说一声抱歉.希望大家能够多多指出我的错误,我来认真修改 ^ - ^ !. (1)改错题 序列求和:输入一个正实数eps,计算 ...

  9. day 52 dom 事件

    本文转载自cnblog.liwenzhou.com 官网资料: http://www.w3school.com.cn/htmldom/dom_methods.asp 事件的内容很重要的,基本概念有点类 ...

随机推荐

  1. NewsDaoImpl

    package com.pb.news.dao.impl; import java.sql.CallableStatement;import java.sql.Connection;import ja ...

  2. App的前后台数据同步

    前言 在开发一个点餐软件时,app的订单数据是使用本地Sqlite数据库,在提交订单数据后,当订单数据在后台(Mysql数据库)发生变化时(如:已买单),本地数据如何改变呢? 思路 前台在查询时,将后 ...

  3. oracle常用函数及关键字笔记

    --函数及关键字--1.trim,ltrim,rtrim 去除字符,无指定默认去除空格SELECT TRIM('a' FROM 'aafhfhaaaaaaaa'), LTRIM('aafhfhaaaa ...

  4. Android Studio和eclipse混淆打包总结

    最近项目有点闲,考虑到以前的项目没有做过混淆,只是用了加固软件进行加固,为了安全性,准备给项目加上,这里做个总结,都经本人亲自在项目实践,说是为了安全性,这好像说大了,一来项目中没用到什么特别的技术, ...

  5. JavaScript中判断鼠标按键(event.button)

    <div id="test"></div> <script> document.oncontextmenu=function(){ return ...

  6. javascript中函数声明与函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式.究竟他们用起来有什么区别呢? 区别如下: (1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. (2) ...

  7. java基础，流程控制语句

                                流程控制语句 条件语句:              if语句:                        *if(条件 boolean类型) ...

  8. 本地Server发布外网Web应用（Oray实现）

    主要讲解如何将本地当做服务器,发布Web应用至外网访问.   准备条件: 1.web应用服务(此处为Tomcat作为web应用服务器): 2.花生壳应用:   第一步,正常搭建本地web项目,应用名为 ...

  9. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  10. 平方根的C语言实现(一)

    曾经做一个硬件成本极度控制的项目,因为硬件成本极低,并且还需要实现较高的精度测量,过程中也自己用C语言实现了正弦.余弦.反正切.平方根等函数. 以下,无论是在我的实际项目中还是本地的计算机系统,int ...