<!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. Ext布局

    Ext主要包括11种标准布局方式:Auto(自动布局).CheckboxGroup(复选框组布局).Fit(自适应布局).Column(列布局).Accordion(折叠布局).Table(表格布局) ...

  2. exchange邮箱的”单点登陆“

    在跟exchange集成登陆时,通常有这样的需求,用户需要点击邮件链接的时候直接打开,不再需要输入用户名密码,实现所谓的单点登陆. 通常有两种方式 1.form认证 登陆原理:用js模拟表单登陆 代码 ...

  3. javascript 高级程序设计学习笔记（面向对象的程序设计) 2

    在调用构造函数时会为实例添加一个指向最初原型的指针,我们可以随时为原型添加属性和方法,并且能在实例中体现出来,但如果是重新了原型对象,那就会切断构造函数与最初原型的联系. function Dog ( ...

  4. Spring学习之Ioc控制反转（1）

    开始之前: 1. 本博文为原创,转载请注明出处 2. 作者非计算机科班出身,如有错误,请多指正 ---------------------------------------------------- ...

  5. 求double类型的n次方

    剑指offer系列面试题 package com.study; /* * 数值的整数次方 * 要求:实现函数 double Power(double base, int exponent) 求base ...

  6. Eclipse安装与搭建Maven

    Maven的具体参考书可以看:<Maven实战> 下载maven可以到:http://maven.apache.org/ Maven的eclipse基本使用可以在这里看到:http://w ...

  7. 判断字符串解析是JsonObject或者JsonArray

    如下,用 JSONTokener 实现: Object json = new JSONTokener(stringData).nextValue(); if(json instanceof JSONO ...

  8. WebService使用的一些总结

    什么是WebService: 这个不用我在这里废话,网上的资料一搜一大把,如果你没有接触过这方面的知识,你可以先去网上查一下.这里我只想说一下我印象比较深刻的几点: WebService是基于soap ...

  9. 32位程序调用Oracle11gR2数据库libclntsh.so失败

    [问题描述]32位程序调用Oracle11gR2数据库的libclntsh.so库时会返回失败. [问题原因]32位程序只能调用32位的Oracle客户端实例包,而R2数据库默认安装完毕后是没有lib ...

  10. centos 安装amp 运行环境+配置虚拟地址

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...