<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var oBtn = document.getElementById("btn");

            var oTxt = document.getElementById("txt1");

            var oUl = document.getElementById("ul1");

            oBtn.onclick = function () {

                var oLi = document.createElement("li");

                var aLi = oUl.getElementsByTagName("li");

                oLi.innerHTML = oTxt.value;

                if (aLi[0].length > 0) {

                    //如果之前有元素则插入在前面

                    oUl.insertBefore(oLi, ali[0]);

                }

                else {

                    oUl.appendChild(oLi);

                }

            }

        }

    </script>

</head>

<body>

    <input type="text" value="" id="txt1" />

    <input type="button" value="创建" id="btn" />

    <ul id="ul1"></ul>

</body>

</html>

--拓展
Oul.removeChild(this.parentNode);

　　

javascript中创建插入元素的更多相关文章

  1. JavaScript中创建数组的方式！

    JavaScript中创建数组的方式! 利用数组字面量 // 1 直接量 console.log(Array.prototype); var arr = [1, 2, 4, 87432]; // 注意 ...

  2. JavaScript中创建类，赋值给ajax中的data参数

    缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) d ...

  3. JavaScript中创建字典对象（dictionary）实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...

  4. 简单使用JSON,JavaScript中创建 JSON 对象(一)

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...

  5. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  8. JavaScript中获取HTML元素的方式

    JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象   document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...

  9. JavaScript中创建命名空间

    引用:http://ourjs.com/detail/538d8d024929582e6200000c   在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺 ...

随机推荐

  1. 洛谷 P1209 修理牛棚== Codevs 2079 修理牛棚

    时间限制: 1 s   空间限制: 128000 KB   题目等级 : 黄金 Gold 题目描述 Description 在一个夜黑风高,下着暴风雨的夜晚,farmer John的牛棚的屋顶.门被吹 ...

  2. POJ 1285 确定比赛名次

    Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委 ...

  3. 推荐一些C#相关的网站、资源和书籍

    一.网站 1.http://msdn.microsoft.com/zh-CN/ 微软的官方网站,C#程序员必去的地方.那里有API开发文档,还有各种代码.资源下载. 2.http://social.m ...

  4. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  5. 用“逐步排除”的方法定位Java服务线上“系统性”故障（转）

    一.摘要 由于硬件问题.系统资源紧缺或者程序本身的BUG,Java服务在线上不可避免地会出现一些“系统性”故障,比如:服务性能明显下降.部分(或所 有)接口超时或卡死等.其中部分故障隐藏颇深,对运维和 ...

  6. Linq to Entities

    首先要添加一个ADO.NET实体数据模型 添加一个Entities 对象,其用法和linqtosql类似例如: StudentInfoEntities2 entity = new StudentInf ...

  7. [CSS]学习总结

    1. 遮挡层 .occlusion { opacity: -.35;/*透明程度*/ -moz-opacity: -.35; filter: alpha(opacity=-35); height: 1 ...

  8. Linux 配置本地yum源

    Linux 配置无网络状态利用yum安装软件 在有网络的情况下安装软件只需一条yum install xxx命令,例如安装gcc只需一条指令:yum install gcc  那么在没有网络的情况下该 ...

  9. css/js online online code editor/formator/debuger

    http://cssdeck.com/labs http://jsfiddle.net/ http://fiddle.jshell.net/  support console http://plnkr ...

  10. Disable keyboard input on Android TimePicker

    try to use: myTimePicker.setDescendantFocusability(TimePicker.FOCUS_BLOCK_DESCENDANTS); to disable f ...