<!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. 如何查找在CDN下的真实ip

    今天去找了一下www.bilibili.tv的IP(为什么要这样子做见),发现www.bilibili.tv使用了CDN服务直接ping找不到其真实IP(实际上不用找也可以但就是想找一下). 那我们应 ...

  2. Android开发代码规范

    目录 1.命名基本原则  2.命名基本规范 2.1编程基本命名规范 2.2分类命名规范 3.分类命名规范 3.1基本数据类型命名规范 3.2控件命名规范 3.3变量命名规范 3.4整个项目的目录规范化 ...

  3. centos6.5安装flume

    这里安装flume是因为游戏业务日志搜集和分析用的 1.安装java 环境rpm -ivh jdk-8u51-linux-x64.rpm Preparing... ################## ...

  4. select的onChange事件问题解决

    一.onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第一次)保证选择的值是改变的! 所以<select name="inv_payee" id=&qu ...

  5. $(document).height()、$("body").height()、$(window).height()区别和联系

    前言:在此以高度为示例,宽度问题可类推.在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要 ...

  6. git记住用户名密码

    git config --global credential.helper store

  7. 精美舒适的对话消息提示框--第三方开源--SweetAlertDialog

    SweetAlertDialog(sweet-alert-dialog)是一个套制作精美.动画效果出色生动的Android对话.消息提示框 SweetAlertDialog(sweet-alert-d ...

  8. Google Chrome七大新特性

    Google Chrome 在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools 同样也是网络开发者进行网络开发的重要工具. DevTools 在不断的进行版本更新,其中有 ...

  9. MySQL数据库主从复制

    一.MySQ主从复制(主库写入数据,从库读取数据) MySql官方下载地址:http://dev.mysql.com/downloads/mysql/ MySql常用命令: 设置密码 UPDATE U ...

  10. windows创建桌面快捷方式的VBA脚本

    Dim wShell, oShortcut    'Dim strDesktop$ ' 为了与VBS兼容,    Dim strDesktop    ' 这里改写一下,测试通过...    Set w ...