<!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. ffmpeg的使用

    -i "转换前的视频绝对路径\文件名.mp4" -movflags faststart+rtphint "转换后的视频绝对路径\文件名.mp4" 上面这条语句是 ...

  2. asp.net 常用的3中身份验证

    1. windows验证: IIS根据应用程序的设置来进行身份验证,要使用这中验证方式,必须禁止使用匿名用户登录. 2. Forms验证: 通过Cookies来保存用户凭证,对未登录的用户 重定向到自 ...

  3. .NET Web开发之.NET MVC框架

    摘要:MVC是一种架构设计模式,该模式主要应用于图形化用户界面(GUI)应用程序.那么什么是MVC?MVC由三部分组成:Model(模型).View(视图)及Controller(控制器). MVC概 ...

  4. jquery 综合使用例子

    效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  5. Java 面向对象(转)

    转自:http://blog.sina.com.cn/s/blog_83c5190f01010ate.html 1.我们可以把JAVA中的类分为以下三种: 类:使用class定义且不含有抽象方法的类. ...

  6. JSP总结1

    JSP: JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动 ...

  7. 获取电脑cpu的使用情况

    using System; using System.Diagnostics; namespace ConsoleApplication1 { class Program { static void ...

  8. [汇编语言]-第九章 根据位移进行转移的jmp指令 段内短转移 段内近转移 段间转移(远转移) 转移的目的地址在指令中,在寄存器中,在内存中的jmp指令

    1- jmp为无条件转移指令,可以只修改IP, 也可以同时修改CS和IP jmp指令要给出两种信息: (1) 转移的目的地址 (2) 转移的距离(段间转移, 段内转移, 段内近转移) 2- 依据位移进 ...

  9. API例子：用Java/JavaScript下载内容提取器

    1,引言 本文讲解怎样用Java和JavaScript使用 GooSeeker API 接口下载内容提取器,这是一个示例程序.什么是内容提取器?为什么用这种方式?源自Python即时网络爬虫开源项目: ...

  10. bokeh-scala

    使用bokeh-scala进行数据可视化 目录 前言 bokeh简介及胡扯 bokeh-scala基本代码 我的封装 总结 一.前言 最近在使用spark集群以及geotrellis框架(相关文章见h ...