匿名函数的使用

createTextnode 创建文本

createElement   创建元素

appendChild     将文本或元素追加

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>动态添加城市</title>

        <script>

            window.onload = function(){

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

                    //1.获取ul元素节点

                    var ulEle = document.getElementById("ul1");

                    //2.创建城市文本节点

                    var textNode = document.createTextNode("深圳");//深圳

                    //3.创建li元素节点

                    var liEle = document.createElement("li");//<li></li>

                    //4.将城市文本节点添加到li元素节点中去

                    liEle.appendChild(textNode);//<li>深圳</li>

                    //5.将li添加到ul中去

                    ulEle.appendChild(liEle);

                }

            }

        </script>

    </head>

    <body>

        <input type="button" value="添加新城市" id="btn"/>

        <ul id="ul1">

            <li>北京</li>

            <li>上海</li>

            <li>广州</li>

        </ul>

    </body>

</html>

javascript 动态添加城市的更多相关文章

  1. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  3. javascript动态添加本地文件列表信息

    工作需要做了一个动态添加列表页面的小demo.用到了杂七杂八的javascript小知识. 而且并没有涉及到工作中的具体情境.有些通用,所以暂且罗列到这里.以后需要的时候可以直接拿来用. 看源码总是让 ...

  4. javascript动态添加form表单元素

    2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...

  5. javaScript动态添加样式

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...

  6. JavaScript 动态添加div 绑定点击事件

    1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...

  7. 转： javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  8. javascript动态添加、修改、删除对象的属性与方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  9. javascript动态添加html节点

    之前一直没怎么接触需要动态添加和删除html节点的项目,这次项目中用到了,也学习了. 在一个<table id="tab">标签中添加一个<tr id=" ...

随机推荐

  1. 三次样条插值matlab实现

    三次样条插值matlab实现 %三次样条差值-matlab通用程序 - zhangxiaolu2015的专栏 - CSDN博客 https://blog.csdn.net/zhangxiaolu201 ...

  2. Android通过AIDL和反射调用系统拨打电话和挂断电话

    首先在项目中添加ITelephony.aidl文件,我的如下: /* * Copyright (C) 2007 The Android Open Source Project * * Licensed ...

  3. C# SQL数据库学习时遇到到一些异常

    1一些关于SqlHelper类的异常: DataAdapter.SqlHelper”的类型初始值设定项引发异常. ExecuteNonQuery.SqlHelper”的类型初始值设定项引发异常. Ex ...

  4. 【ansible】使用ansible安装nginx

    一.主机准备 ServerIP:10.10.10.102 ClientIP:  10.10.10.103,10.10.10.104 二.安装ansible yum -y install ansible ...

  5. linux学习(一) -- ubuntu下lamp环境的配置

    以下为实测教程,希望能为大家提供帮助,转载请注明出处 ubuntu+apache+mysql+php7 第一.更换apt的源 1.复制原文件备份 sudo cp /etc/apt/source.lis ...

  6. 设计模式之第16章-代理模式(Java实现)

    设计模式之第16章-代理模式(Java实现) “现在朋友圈真是太让人蛋疼了啊.”“怎么说?”“一堆代理,各种卖东西的,看着好烦人.”“哎,删了呗.”“都是朋友,哪里好意思删啊.”“这倒也是...哎,迫 ...

  7. C++编程规范（101条准则）

    记录学习,方便以后查看.  2014-12-28 看完这本书,但是我做到的又有多少呢?确实有一部分 0 不要拘泥于小节 1 在高警告级别干净利落的进行编译,不放过任何警告 2 使用自动构建系统 3 使 ...

  8. Ecplise实战常用操作快捷键（更新至2018年10月8日 13:46:40）

    ctrl+鼠标左键    进入/查看这个类或者方法, ctrl + t        快速类型层次结构(出现部分方法) ctrl + o                             快速大 ...

  9. Python中的Json模块dumps、loads、dump、load函数介绍

    Json模块dumps.loads.dump.load函数介绍 1.json.dumps() json.dumps() 用于将dict类型的数据转成str,因为如果直接将dict类型的数据写入json ...

  10. 初学Linux 命令

    查看ip:ifconfig 切换用户:us root(root为用户名) 显示当前目录:pwd 列出当前目录下所有文件:ls 进入某个目录 :cd 创建一个文件夹:mkdir 创建多个目录(当没有该父 ...