<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. vijos1698题解

    题目: 船体的结构是不能随意修改的..那样会破坏整艘船和谐的韵律.. 虽然说.如果沿岸航行的话是不会预见太大的海浪的..但是还要小心保护轨杆和船帆.. 毕竟对于小s这样的单轨帆船...轨杆和船帆如果受 ...

  2. Japanese Learning - 五十音图

    平假名: 片假名: あ い う え お ア イ ウ エ オ か き く け こ カ キ ク ケ コ さ し す せ そ サ シ ス セ ソ た ち つ て と        タ チ ツ テ ト な に ...

  3. java 中的重载与重写 抽象类与接口的区别

    . 重载与重写的区别: 重载(overload)               | 重写(override) 1 方法的名称相同,参数个数.类型不同 | 方法名称.参数列表.返回值类型与父类完全相同 2 ...

  4. PHP发送E-mail---新手教程

    首先下载PHPmailer拓展包,其实就是别人封装好的类库,下载链接:http://pan.baidu.com/s/1slbhGo1 首先去163注册个账号,然后登陆进去,点击设置下面的 POP3/S ...

  5. php使用flock阻塞写入文件和非阻塞写入文件的实例讲解

    php使用flock阻塞写入文件和非阻塞写入文件的实例讲解: 阻塞写入代码:(所有程序会等待上次程序执行结束才会执行,30秒会超时) <?php $file = fopen("test ...

  6. AOP in dotnet ：AspectCore的参数拦截支持

    距离上一篇AspectCore的介绍发布已经很长一段时间了,这篇文章也早该和大家见面,最近一直忙于适应新工作,并在业余时间有幸向何镇汐,Savorboard,农夫,AlexLEWIS等几位大牛请教学习 ...

  7. docker~Dockerfile方式建立镜像HelloWorld

    回到目录 Dockerfile可以便捷的建立一个image,它可以在一个镜像基础上,去构建另一个镜像,这也许就是它的特色,也是docker的本意! 我们下载一个mono的镜像 docker pull ...

  8. Objective-C MapKit的使用-LBS简单的租车主界面demo

    效果 分析 三个view:地图view.车辆信息view.车辆类型选择view 地图view:大头针的摆放,根据不同的种类显示大头针 车辆信息view:根据当前点击的大头针显示对应的车辆信息 车辆类型 ...

  9. python学习好文

    摘要: 学习别人的学习历程. 一 iTech的博客 http://www.cnblogs.com/itech/archive/2011/01/31/1948265.html

  10. Dubbo负载均衡策略

    在集群负载均衡时,Dubbo提供了多种均衡策略,缺省为random随机调用. 可以自行扩展负载均衡策略,参见:负载均衡扩展Random LoadBalance 随机,按权重设置随机概率. 在一个截面上 ...