<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基础之集合框架（1）

    一.介绍Collection 1.概念:Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection ...

  2. 移动端300ms的点击延迟以及解决方案

    [今天做在移动端的一些效果时,我选择使用动画而不是用过渡,这个300ms的点击延迟是我为什么使用动画而不使用过渡最主要的一个原因] 动画和过渡 共同点:都是css控制DOM运动, 不同点: 1.过渡: ...

  3. IIS 部署WCF服务注意事项

    IIS部署WCF服务的时候经常会出现如下错误: System.ServiceModel.EndpointNotFoundException”类型的未经处理的异常在 WinformWcfHost.exe ...

  4. hihocoder 1050 树中的最长路（动态规划，dfs搜索）

    hihocoder 1050 树中的最长路(动态规划,dfs搜索) Description 上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中,小Ho发现他不仅 ...

  5. 深入浅析JavaScript中的constructor

    constructor 属性返回对创建此对象的数组函数的引用.本文给大家介绍JavaScript中的constructor ,需要的朋友参考下吧 定义和用法 constructor 属性返回对创建此对 ...

  6. Django--Uploaded Files以及Handlers

    一.表示已经上传的文件(uploaded files)的类 表示已经上传的文件的类有下面几个: class UploadedFile 在文件上传的期间,实际的文件数据被存储在request.FILES ...

  7. 2、微信小程序之弹幕的实现（无后台）

    对弹幕功能主要利用环信来实现的,读者也许对环信这个东西很陌生,请先自行了解这环信再来看这文章. 环信开发文档:http://docs.easemob.com/im/400webimintegratio ...

  8. Java并发编程（2）：线程中断（含代码）

    使用interrupt()中断线程 当一个线程运行时,另一个线程可以调用对应的Thread对象的interrupt()方法来中断它,该方法只是在目标线程中设置一个标志,表示它已经被中断,并立即返回.这 ...

  9. [转]从入门到精通: 最小费用流的“zkw算法”

    >>>> 原文地址:最小费用流的“zkw算法” <<<< 1. 网络流的一些基本概念 很多同学建立过网络流模型做题目, 也学过了各种算法, 但是对于基本 ...

  10. IDEA 单元测试testng入门及testng.xml

    直接进入正题: 1.TestNG的运行方式如下: With a testng.xml file 直接run as test suite With ant 使用ant From the command ...