<!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. 【Java基础】构造方法调用构造方法

    从一个程序开始: class dog { private String name; private String color; private int age; dog(String name) // ...

  2. java面对对象 关键字this super

    this:this是指向对象本身的一个指针,成员函数内部指向当前类的对象 其实this主要要三种用法: 1.表示对当前对象的引用! 2.表示用类的成员变量,而非函数参数,注意在函数参数和成员变量同名是 ...

  3. Struts2 实战经验 之 入门

    Struts2以WebWork为核心,采用拦截器机制处理用户请求,这样的设计使业务逻辑控制器能够与Servlet API完全脱离开,降低了藕联性. Part 1. 安装与配置 下载struts-2.3 ...

  4. jquery 项目所用

    <script> $(document).ready(function(){ $.ajax({ type:'post', url :'interface.ajax.php', data:{ ...

  5. [转载]字符编码笔记：ASCII，Unicode和UTF-8

    [转载] :http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 1. ASCII码 在计算机内部,所有的信息最终都表 ...

  6. 理解中WebAPI的属性和相关操作 FormBody和 FormUri等（WebAPI 二）

    1.FromUri使用 将数据通过url方式传递.我们需要在webapi方法标明,这个参数只接受url中参数的值, $("#Save").click(function () { $ ...

  7. 由PhysicalFileProvider构建的物理文件系统

    由PhysicalFileProvider构建的物理文件系统 ASP.NET Core应用中使用得最多的还是具体的物理文件,比如配置文件.View文件以及网页上的静态文件,物理文件系统的抽象通过Phy ...

  8. haproxy path_end不能忽略

    C:\>ping www.zjtest7.com 正在 Ping www.zjtest7.com [192.168.32.82] 具有 32 字节的数据: 来自 192.168.32.82 的回 ...

  9. 链表k个节点反向

    问题: 以k个元素为一组,反转单向链表.比如: 输入: 1->2->3->4->5->6->7->8->null and k = 3 输出:3-> ...

  10. https://pta.patest.cn/pta/test/15/exam/3/question/724

    List Reverse( List L ){ if(L==NULL) return; List head=(List)malloc(sizeof(struct Node)); head->Ne ...