<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. （转载）CloseableHttpClient设置Timeout

    参考文档: http://blog.csdn.net/zheng0518/article/details/46469051 https://segmentfault.com/a/11900000005 ...

  2. JavaWeb 后端 <八> 之 JDBC基礎（全）

    一.JDBC简介 1.JDBC是SUN公司为了简化操作数据推出一套规范.数据库厂商的驱动就是对JDBC的实现. 2.Java Data Base Connectivity(java数据库连接),它主要 ...

  3. 在Docker容器中运行.Net Core web Api项目

    安装Docker环境 参考本人这篇<CentOS 7 下Docker的安装>文章进行安装以及环境配置,这里不做赘述. 通过.NetCore开发WebApi项目 1. 创建.Net Core ...

  4. Luogu 3402 最长公共子序列（二分，最长递增子序列）

    Luogu 3402 最长公共子序列(二分,最长递增子序列) Description 经过长时间的摸索和练习,DJL终于学会了怎么求LCS.Johann感觉DJL孺子可教,就给他布置了一个课后作业: ...

  5. ASP.NET Core 开源论坛项目 NETCoreBBS

    ASP.NET Core 轻量化开源论坛项目,ASP.NET Core Light forum NETCoreBBS 采用 ASP.NET Core + EF Core Sqlite + Bootst ...

  6. 狙杀ES6之开光篇

    前言 最近有很多小伙伴在后台留言说,闰土哥,是时候来一波干货了!(机智的你们似乎已经猜到我接下来要说什么了,哈哈-).没错,今天闰土为大家带来了久违的干货文章,而且是一个系列的哦!(文章系列较长,请自 ...

  7. Log4Net（一）：快速入门

    概览 Log4Net是Apache Log4J框架在.NET平台上的实现,它是一个帮助开发者将日志信息以多种方式(数据库.控制台.文件等)输出的开源工具. 为什么要使用日志记录 提供应用程序运行时状态 ...

  8. 整合spring+mybatis遇到的问题01

    报错如下:No matching bean of type [com.mybaties.test.service.UserService] found for dependency: expected ...

  9. 【html】 a 标签

    摘要 嗷呜,发现好多前端细节,基础不扎实啊,喵了个咪 target 属性 在制定框架中打开 <a href="a.html" target="view_frame& ...

  10. Java解析OFFICE(word,excel,powerpoint)以及PDF的实现方案及开发中的点滴分享

    Java解析OFFICE(word,excel,powerpoint)以及PDF的实现方案及开发中的点滴分享 在此,先分享下写此文前的经历与感受,我所有的感觉浓缩到一个字,那就是:"坑&qu ...