<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. P2286 [HNOI2004]宠物收养场

    题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的一个特殊的公式,得出该领 ...

  2. 服务器 设置 将 Tomcat 注册 到系统服务 及使用方法

    将TOMCAT注册成系统服务的好处,就是方便维护,在服务器重启的时候,系统会自动启动系统服务,而不必手动操作,这就为我们在项目维护时省下不少麻烦. 在项目维护期间有很多客户只要一有问题,就电话招呼,而 ...

  3. Selenium的简单安装和使用

    Selenium的安装 pip install selenium Selenium模块需要调用浏览器,需要配置selenium的浏览器驱动 Firefox(火狐) 下载对应版本的geckdriver. ...

  4. "HK"日常之制作一只QQ刷屏

    刷屏器是什么?可以吃吗?如果可以吃它好吃吗? um. 刷屏器就是可以定时发生信息的东西 刷屏器可以应用于很多方面,例如别人不理你了或者在QQ斗图的时候.警告:本教程仅作为学习研究,禁止其他用途!--- ...

  5. Rsync：一个很实用的文件同步命令

    sync是Linux系统下的文件同步和数据传输工具,可用于同步文件.代码发布 1.安装. yum install -y xinetd yum insatll -y rsync 2.配置 打开rsync ...

  6. Unity编辑器重写Inspector面板，面板中编辑的数据不触发场景发生变化的问题。

    今天开始协助主程一起制作新框架.主程让我写关于新版UI框架注册UI预制体用的快捷编辑器. 现学现写,总算完成了. 可以直接把选中的预制体添加到UIController的数组中,期间涉及到改变大小.所以 ...

  7. maven：pom.xml中没有dependency标签错误

    dependency的标签是包含在dependencies中的.

  8. （转）用JUnit4进行单元测试

    场景:从开始写代码至今,对于单元测试一直没有重视,但是也厌倦了了程序中的额System.out和log日志输出.单元测试使我看到了在开发过程中的安全性和便捷性,所以下决心好好整理下. 有感而发——&l ...

  9. HDU - 4995 - Revenge of kNN

    题目链接 : https://vjudge.net/problem/HDU-4995 题目大意  :   读入n个点的坐标与该点所拥有的值val,进行m次查询,对于每一次查询,读入该点的坐标,计算离该 ...

  10. swift 3.0 基础练习 面向对象 类的扩展

    要求 为NSString类添加split功能 为NSString类添加一个函数func split(splitStr: NSString)-> [NSString],split是把字符串以特定的 ...