匿名函数的使用

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. Vue之简易的留言板功能

    今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...

  2. python3 练习题100例 （八）

    题目八:暂停一秒输出,并格式化当前时间. #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ 题目八:暂停一秒输出,并格 ...

  3. 使用virtualbox安装的Ubuntu，窗口分辨率过小，使用增强工具完成和vmtools一样的功能。

    今天用VirtualBox成功装上Ubuntu10.04之后发现了一个问题:默认情况下 ubuntu 的分辨率最高只能设到800*600.但是对于自己的大显示器,在分辨率800*600的ubuntu窗 ...

  4. 牛课第二次多校I

    链接:https://www.nowcoder.com/acm/contest/140/I来源:牛客网 题目描述 White Cloud has a square of n*n from (1,1) ...

  5. Redis实现之事件

    事件 Redis服务器是一个事件驱动程序,服务器需要处理以下两类事情: 文件事件(file event):Redis服务器通过套接字与客户端(或者其他Redis服务器)进行连接,而文件事件就是服务器对 ...

  6. loj2090 「ZJOI2016」旅行者

    分治+最短路,很套路的 #include <algorithm> #include <iostream> #include <cstring> #include & ...

  7. luogu2870 [USACO07DEC]最佳牛线，黄金Best Cow Line, Gold

    ref #include <iostream> #include <cstring> #include <cstdio> using namespace std; ...

  8. Java之OutOfMemoryError简单分析

    Java之OutOfMemoryError简单分析 最近编码遇到了Java内存溢出的问题,所以就想顺便总结一下几种导致Java内存溢出的栗子,以及碰到Java内存溢出要如何去解决. Java堆溢出 J ...

  9. Robotium接入到Jenkins持续集成自动化测试

    6.3 将测试用例接入到Jenkins 由于我是自己学习的手机自动化测试,没有实际投入到工作中使用,jenkins的接入也没有具体操作,现摘抄一下网页:http://www.tuicool.com/a ...

  10. APM简介

    1.什么是APM APM (应用性能管理) - Application Performance Management & Monitoring在信息科学和系统控制领域,APM致力于监控和管理应 ...