<!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. Codevs 2898 卢斯的进位制

    时间限制: 1 s  空间限制: 32000 KB  题目等级 : 青铜 Bronze 题目描述 Description 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母 ...

  2. DailyWallpaper - V1.01 released

    桌面每日一图 最近发现美国国家地理网站上有个photo of the day很不错,地址在这里.http://photography.nationalgeographic.com/photograph ...

  3. zedboard搭建交叉编译环境

    参考:http://blog.csdn.net/xzyiverson/article/details/11264417 我安装的LINUX12.04LTS 双系统 下载好交叉编译软件xilinx-20 ...

  4. 全面解析SQL SERVER 的左右内连接

    SQL SERVER数据库的三种常用连接解析: 这里先给出一个官方的解释: left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右 ...

  5. shell编程基础练习

    shell作为一个人机交互的接口,在Linux中发挥着很大的作用,而shell编程则是减轻系统工程师工作的利器,这里总结一下shell编程的主要内容(趁着程序运行的空档). 本文的基本结构是shell ...

  6. Delphi XE5教程8：使用Delphi命名空间

    // Project file declarations... //项目文件声明… program MyCompany.ProjectX.ProgramY; // Unit source file d ...

  7. Python中处理时间 —— time模块

    time模块 time 模块可用来处理时间,详细的说明参考 time模块说明. 逝去的秒数 逝去的秒数表示从某个时间(Python中是"Thu Jan 1 07:00:00 1970&quo ...

  8. linux驱动路径

    1. 按键驱动 \drivers\input\keyboard\utu2440_buttons.c 2. LED驱动 \drivers\char\utu2440-led.c 3. DM9000网卡驱动 ...

  9. 从零开始学ios开发（六）：IOS控件（3），Segmented Control、Switch

    这次的学习还是基于上一个项目继续进行(你也可以新建一个项目)学习Segmented Control和Switch. Segmented Control Switch Segmented Control ...

  10. asp.net 多个域名重定向，在web.Config中配置

    一个网站有多个域名,但是需要在访问其中某个域名之后跳转到另一域名. Web.config 中配置 </system.webServer> <!--重定向 域名 开始--> &l ...