<body>

        <select size="7" style="width: 200px;" id="slt">

            <option value="123">123</option>

        </select><br /><br />

        <input type="text" id="txt"/>

        <input type="button" value="添 加" id="btn"/>

    </body>

</html>

<script>

    var txt = document.getElementById('txt');

    var slt = document.getElementById('slt');

    document.getElementById('btn').onclick = function(){

        var opt = document.createElement('option');

        //opt.value = txt.value;

        opt.innerText = txt.value;

        slt.appendChild(opt);

        txt.value = '';

    }

</script>

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

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

<body>

        <select id="left_slt" size="7" multiple="multiple" style="width: 150px;">

            <option>ABC</option>

            <option>123</option>

            <option>xyz</option>

            <option>IJK</option>

        </select>

            <input type="button" id="to_right" value="向右" />

            <input type="button" id="to_left" value="向左" />

            <select id="right_slt" size="7" style="width: 150px;">

        </select>

    </body>

</html>

<script>

    var left_slt=document.getElementById('left_slt');

    var left_right=document.getElementById('left_right');

    document.getElementById('to_right').onclick=function(){

        right_slt.appendChild(left_slt.options[left_slt.selectedIndex]);

    }

    document.getElementById('to_left').onclick=function(){

        left_slt.appendChild(right_slt.options[right_slt.selectedIndex]);

    }

</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. 【JAVA】配置JAVA环境变量

    系统变量新建,添加 变量名JAVA_HOME 变量值为C:\Java\jdk版本号 修改 Path为 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

  2. python学习笔记之运算符

    目录 前言 软件环境 身份运算符 算术运算符 比较运算符 位移运算符 自变运算符 位运算符 逻辑运算符 成员关系运算符 Python真值表 最后 前言 在前面的博文介绍了Python的数据结构之后,接 ...

  3. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  4. Spring Data JPA 复杂/多条件组合查询

    1: 编写DAO类或接口  dao类/接口 需继承 public interface JpaSpecificationExecutor<T> 接口: 如果需要分页,还可继承 public ...

  5. one plus 1（一加1）刷 kali nethunter 教程

    刚刚入手的一加1,刷成了h2os再进行的本次刷机. 用到以下资源: 链接:http://pan.baidu.com/s/1o7S0xzs 密码:2gvm 好了,开始正题,如果你的系统不是H2OS建议先 ...

  6. Express 学习笔记纯干货（Routing、Middleware、托管静态文件、view engine 等等）

    原始文章链接:http://www.lovebxm.com/2017/07/14/express-primer/ 1. Express 简介 Express 是基于 Node.js 平台,快速.开放. ...

  7. 浅谈javascript中的call与apply方法

    call方法与apply方法都是为了改变函数体内部this的指向. call方法与apply方法,这二者的作用完全一样,只是接受参数的方式不太一样. apply()方法: Function.apply ...

  8. python函数（3）：装饰器

    昨天学了很多函数方面的概念和知识其中有一个闭包的函数.很多人都对闭包的作用不是很清楚,今天我们就来认识一个新的知识点装饰器.它就是闭包函数的一个经典应用. 预习: 编写装饰器,为多个函数加上认证的功能 ...

  9. Redola.Rpc 集成 Consul 服务发现

    Redola.Rpc 解决了什么问题? Redola.Rpc 是一个使用 C# 开发的 RPC 框架,代码开源在 GitHub 上.目前版本仅支持 .NET Framework 4.6 以上版本,未来 ...

  10. ORACLE - 管理重做日志文件

    ORACLE重做日志文件用于在数据库崩溃等情况下用于恢复数据,默认情况下为三个文件redo01.log/redo02.log/redo03.log,文件组循环使用,在录入与更新操作比较多的应用中,日志 ...