<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript">

        window.onload = function() {

            //创建一个"广州"节点,添加到#city下
            myClick("btn01",function(){
                var li = document.createElement("li");
                var gz = document.createTextNode("广州");
                li.appendChild(gz);
                var city = document.getElementById("city");
                city.appendChild(li);
            });
            myClick("btn02",function(){
                var li = document.createElement("li");
                var gz = document.createTextNode("广州");
                li.appendChild(gz);
                var city = document.getElementById("city");
                city.insertBefore(li,bj);
            });
            myClick("btn03",function(){
                var li = document.createElement("li");
                var gz = document.createTextNode("广州");
                li.appendChild(gz);
                var city = document.getElementById("city");
                city.replaceChild(li,bj);
            });
            myClick("btn04",function(){
                var city = document.getElementById("city");
                city.removeChild(bj);
            });
            myClick("btn04",function(){
                var city = document.getElementById("city");
                city.removeChild(bj);
            });
            myClick("btn05",function(){
                var city = document.getElementById("city");
                // var cns = city.children;
                // for (let i=0;i<cns.length;i++)
                // console.log(cns[i].innerHTML)
                alert(city.innerText)
            });
            myClick("btn06",function(){
                var bj = document.getElementById("bj");
                bj.innerHTML="长坡";
            });
            myClick("btn07",function(){
                var city = document.getElementById("city");
                city.innerHTML+="<li>广州</li>";
            });

        };

        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

    </script>

</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

    </div>
</div>
<div id="btnList">
    <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
    <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
    <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
    <div><button id="btn04">删除#bj节点</button></div>
    <div><button id="btn05">读取#city内的HTML代码</button></div>
    <div><button id="btn06">设置#bj内的HTML代码</button></div>
    <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>

												


											
javascript的简单查询和插入和修改的更多相关文章
	

    
								
  1. MySQL数据库表的数据插入、修改、删除、查询操作及实例应用
		
    一.MySQL数据库表的数据插入.修改.删除和查询 CREATE DATABASE db0504; USE db0504; CREATE TABLE student ( sno ) NOT NULL  ...
    
		
    2. 
						
  2. 【Javascript】列表查询页面，简单地保存上一次查询的查询参数
		
    开发中经常做一些查询参数 + 列表参数的功能,这些功能有时候需提供导出Excel,或带超链接到其他明细页面的功能点. 在一些交互性要求严格的系统,需求方会要求: 用户第一个输入某些查询条件进行列表查询 ...
    
		
    3. 
						
  3. Entity Framework 6 Recipes 2nd Edition（10-8）译 - >映射插入、修改、删除操作到存储过程
		
    10-8. 映射插入.修改.删除操作到存储过程 问题 想要映射插入.修改.删除操作到存储过程 解决方案 假设已有运动员实体模型,如Figure 10-8所示. 对应的数据库表如Figure 10-9所 ...
    
		
    4. 
						
  4. LINQ to SQL 系列 如何使用LINQ to SQL插入、修改、删除数据
		
    http://www.cnblogs.com/yukaizhao/archive/2010/05/13/linq_to_sql_1.html LINQ和 LINQ to SQL 都已经不是一个新事物了 ...
    
		
    5. 
						
  5. JDBC连接(MySql)数据库步骤，以及查询、插入、删除、更新等十一个处理数据库信息的功能
		
    主要内容:  JDBC连接数据库步骤. 一个简单详细的查询数据的例子. 封装连接数据库,释放数据库连接方法. 实现查询,插入,删除,更新等十一个处理数据库信息的功能.(包括事务处理,批量更新等) 把十 ...
    
		
    6. 
						
  6. LINQ to SQL 系列 如何使用LINQ to SQL插入、修改、删除数据 （转）
		
    http://www.cnblogs.com/yukaizhao/archive/2010/05/13/linq_to_sql_1.html LINQ和 LINQ to SQL 都已经不是一个新事物了 ...
    
		
    7. 
						
  7. SQL Server温故系列(2)：SQL 数据操作 CRUD 之简单查询
		
    1.查询语句 SELECT 1.1.查询语句的 SELECT 子句 1.2.查询语句的 FROM 子句 1.2.1.内连接查询 INNER JOIN 1.2.2.外连接查询 OUTER JOIN 1. ...
    
		
    8. 
						
  8. 010.简单查询、分组统计查询、多表连接查询（sql实例）
		
    -------------------------------------day3------------ --添加多行数据:------INSERT [INTO] 表名 [(列的列表)] --SEL ...
    
		
    9. 
						
  9. MySQL - 数据查询 - 简单查询
		
    1. 简述 查询数据是指从数据库中获取所需要的数据.如Jack 要达到验证用户名和密码的目的,就需要从数据库已保存的用户表中读取当前用户的密码进行验证,以验明正身!保存查询数据是数据库操作中常用且重要 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Navicet Mysql数据库电脑本地备份
			
    Navicet Mysql数据库电脑本地备份 1.打开navicat客户端,连上mysql后,双击左边你想要备份的数据库.点击"计划",再点击"新建批处理作业" ...
    
			
    2. 
						
  2. Computer
			
    Computer 1. Ctrl+N .根据惯例,“Control”.“Shift” 以及 “Alternate” 按键将以 Ctrl.Shift 以及 Alt 来表示,需要特别指出的是,其中第一个按 ...
    
			
    3. 
						
  3. Android-进程理解/进程的优先级别
			
    进程理解 Android系统最小的控制单元是:进程 process 应用/CPU最小的控制单元是:线程 thread 一个应用一个 process 进程 一个应用一个 package(包是唯一的) 一 ...
    
			
    4. 
						
  4. js练习计算器
			
    js练习计算器,支持鼠标点击.键盘操作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
    
			
    5. 
						
  5. centos 安装 tkinter（不只用来做界面，在pylot中也使用）
			
    Python2 [root@binger ~]# yum -y install tkinter tcl-devel tk-devel [root@binger ~]# rpm -qa | grep ^ ...
    
			
    6. 
						
  6. Linux Socket - UDP链接包
			
    LINUX UDP SOCKET 01 UDP号绑定会报错吗? 会的,提示Address is using,本地的没有区别 UDP不需要发起链接,不知道是不是连接成功 client的IP地址和端口号不 ...
    
			
    7. 
						
  7. airport 抓包
			
    链接airport命令: ln -s /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources ...
    
			
    8. 
						
  8. C#——Socket
			
    最近公司让我搞个socket小程序(服务端). 主要的功能:客户端发字符串到服务端,服务端接收后在界面上显示. 参照了网上许多代码,自己从中修改整理代码. public Form4() { Initi ...
    
			
    9. 
						
  9. IOS渠道追踪方式
			
    本文来自网易云社区 作者:马军 IOS,安卓渠道追踪的差异 Google Play国内不可用,国内的安卓 App 分发,都是依托几十个不同的应用市场或发行渠道,如百度.360.腾讯等互联网企业以及小米 ...
    
			
    10. 
						
  10. 【Oracle 12c】最新CUUG OCP-071考试题库（59题）
			
    59.(16-8)choose two: Which two statements are true regarding the USING and ON clauses in table joins ...
    
			
    11.