<!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. va泛型
			
    va泛型 什么是泛型? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数化类型时指定的 ...
    
			
    2. 
						
  2. Oracle学习笔记(八)
			
    十一.子查询 1.子查询概述 学习子查询的原因 事例:查询工资比SCOTT高的员工信息 思路:1.scott的工资 select sal from emp where ename='SCOTT'; 2 ...
    
			
    3. 
						
  3. RocketMQ runbroker.sh 分析JVM启动参数
			
    runbroker.sh #====================================================================================== ...
    
			
    4. 
						
  4. 如何取得nginx做反向代理时的真实IP？
			
    1. 编译 对于client -> nginx reverse proxy -> apache, 要想在程序中取得真实的IP,在执行nginx的configure时,必须指定参数" ...
    
			
    5. 
						
  5. Linux 基础教程 38-文件下载
			
    什么是wget     wget用原始帮助里面的英文来讲就是:The non-interactive network downloader,非交互式网络下载器.它支持HTTP.HTTPS.FTP等协议 ...
    
			
    6. 
						
  6. Codeforces758C Unfair Poll                                                                                            2017-01-20 10:24             95人阅读              评论(0)              收藏
			
    C. Unfair Poll time limit per test 1 second memory limit per test 256 megabytes input standard input ...
    
			
    7. 
						
  7. 两种步骤 更改 EBS R12界面LOGO以及内容
			
    from:metalink more: Note 174219.1 - How To Change The Logo In The Oracle Application Menu Note 84975 ...
    
			
    8. 
						
  8. Oracle Inventory Management Application Program Interface ( APIs) (Doc ID 729998.1)
			
    In this Document Goal Solution References APPLIES TO: Oracle Inventory Management - Version 12.0.0 a ...
    
			
    9. 
						
  9. Java Web系列：Java Web 项目基础
			
    1.Java Web 模块结构 JSP文件和AXPX文件类似,路径和URL一一对应,都会被动态编译为单独class.Java Web和ASP.NET的核心是分别是Servlet和IHttpHandle ...
    
			
    10. 
						
  10. Linux 用户和文件
			
    Linux系统中用户的扩展研究 进程 用户和文件 Linux中的用户及用户组 linux中只有两个等级:root和非root, 一个用户至少属于一个用户组 一个用户可以属于多个用户组 用户本身的区别主 ...
    
			
    11.