<!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 () {

            document.getElementById("btnAdd").onclick = function () {

                var ulList = document.getElementById("ulList");

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

                //如果是双标签，那么标签的文本值就是innerHTML或是innerText

              //  linew.innerHTML = "四川";

                linew.innerHTML = prompt("请输入一个值");

                //将创建好的li标签添加到ul里面

                ulList.appendChild(linew);

                ulList.insertBefore(linew, ulList.childNodes[0]);

            };

            var ulli = gel("ulList");

            var lis = ulli.childNodes;//获取所有的子元素

            for (var i = 0; i < lis.length; i++) {

                lis[i].onclick = function () {

                    //  alert(this.innerHTML);//this 你当前点击的那个，this就是这个对象

                    if (confirm("确定要删除吗？"))

                    {

                        this.parentNode.removeChild(this);//删除当前节点

                    }

                }

            }

        }

        function gel(id) { return document.getElementById(id); }

    </script>

</head>

<body>

    <input type ="button" id="btnAdd" value ="新增" />

    <ul id="ulList">

        <li >北京</li>

        <li >上海</li>

        <li >广州</li>

    </ul>

</body>

</html>

　　

document_createElement的更多相关文章

随机推荐

  1. mvc ajax请求

    @{ ViewBag.Title = "ajax"; } <script src="../../Scripts/jquery-1.4.4.js" type ...

  2. jdbc 日期 时间

    //pstmt.setDate(1, new Date(new java.util.Date().getTime())); pstmt.setTime(1, new Time(new java.uti ...

  3. 写sql语句注意事项

    做管理系统的,无论是bs结构的还是cs结构的,都不可避免的涉及到数据库表结构的设计,sql语句的编写等.因此在开发系统的时候,表结构设计是否合理,sql语句是否标准,写出的sql性能是否优化往往会成为 ...

  4. UTF-8、GB2312都支持的汉字截取函数

    <?php/*Utf-8.gb2312都支持的汉字截取函数cut_str(字符串, 截取长度, 开始长度, 编码);编码默认为 utf-8开始长度默认为 0*/ function cut_str ...

  5. 利用html5中的localStorage获取网页被访问的次数

    利用html5中的localStorage获取网页被访问的次数 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  6. Java IO流分析整理 .

    Java中的流,可以从不同的角度进行分类. 按照数据流的方向不同可以分为:输入流和输出流. 按照处理数据单位不同可以分为:字节流和字符流. 按照实现功能不同可以分为:节点流和处理流. 输出流: 输入流 ...

  7. 一段phpcurl代码

    $header[] = 'Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-fl ...

  8. 流程控制 - PHP手册笔记

    脚本由语句构成,语句靠流程控制实现功能,这一节主要介绍了几个关键字的使用. elseif elseif和else if的行为完全一样,如果用冒号来定义if/elseif条件,那就不能用两个单词的els ...

  9. Word Amalgamation（hdoj1113）

    Word Amalgamation Problem Description In millions of newspapers across the United States there is a ...

  10. JVM GC之一找出不可达对象并回收

    JAVA运行时数据区域 1.程序计数器:当前线程所执行的字节码的行号指示器.一个处理器只会执行一条线程中的指令,为了线程切换后能回复到正确的执行位置,所以每条线程都需要一个独立的计数器.各条线程之间互 ...