<!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. C++ 重载new和delete操作符

    原因: C++标准库提供的new和delete操作符,是一个通用实现,未针对具体对象做具体分析 存在分配器速度慢.小型对象空间浪费严重等问题,不适用于对效率和内存有限制的应用场景   好处: 灵活的内 ...

  2. 安装新版本的mysql数据库

    默认情况,在CentOS 6.8 下通过yum安装的是5.1.73版本,现在需求是安装5.7版本. -------------------------------------------------- ...

  3. 多线程更新已排序的Datagridview数据，造成数据错位

    多线程更新已排序的Datagridview数据,触发Datagridview的auto-sort时间,数据重新排序,造成后面更新数据的更新错误. 解决方法: 方法一.设置Datagridview的表头 ...

  4. Silverlight中嵌套html、swf、pdf

    1.MainPage.xaml <UserControl x:Class="SilverlightClient.MainPage" xmlns="http://sc ...

  5. 如何通过jquery隐藏和显示元素

    以下几种方式可以隐藏一个元素:1,CSS display的值是none.2,type="hidden"的表单元素.3,宽度和高度都显式设置为0.4,一个祖先元素是隐藏的,该元素是不 ...

  6. 为msysgit增加vim语法高亮文件

    在win7下装了msysgit,今天我遇到一个不爽的问题,打开git bash,用vim打开一个xml文件 结果都是黑屏的,没语法高亮,这个必须不能忍啊,我找到msysgit的安装目录,发现Vim73 ...

  7. Yii2框架数据库增删改查小结

    User::find()->all();    //返回所有用户数据:User::findOne($id);   //返回 主键 id=1  的一条数据: User::find()->wh ...

  8. HTTP 错误 404.3 - Not Found

    在使用win2012服务器上的IIS发布网页的时候,出现下面的错误 解决办法: 将应用程序开发下的所有功能都安装. 如果上面的方法没解决问题的话,那么看看下图中的这些安装没,没有的话就继续安装.

  9. 在Web API中使用Swagger-UI开源组件（一个深坑的解决）

    介绍: Swagger-Ui是一个非常棒的Web API说明帮助页,具体详情可自行Google和百度. 官网:http://swagger.io/    GitHub地址:https://github ...

  10. C++中用辗转相除法求两个数的最大公约数和最小公倍数

    两个数的最大公约数:不能大于两个数中的最小值,算法口诀:小的给大的,余数给小的,整除返回小的,即最大公约数,(res=max%min)==0?  max=min,min=res return min; ...