<!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. JSP中的一个树型结构
			
    看方力勋的javaWeb,采用左右值来表示树型结构(就是俺门的多级分类)表结构 页面代码 <%@ page language="java" import="java ...
    
			
    2. 
						
  2. thinkphp ajax分页加载更多最简单的实现方法
			
    <div class="li_list"> <volist name="list" id="vo"> <div ...
    
			
    3. 
						
  3. 复杂HTML页面解析
			
    1.层叠样式表CSS可以让html元素呈现出差异化,网络爬虫可以通过class属性的值,轻松分出不同标签 findAll函数通过标签的名称和属性来查找标签 from urllib.request im ...
    
			
    4. 
						
  4. linux数据库备份
			
    linux数据库备份 服务端启用二进制日志 如果日志没有启开,必须启用binlog,要重启mysql,首先,关闭mysql,打开/etc/my.cnf,加入以下几行: [mysqld] log-bin ...
    
			
    5. 
						
  5. nginx 配置中的if判断
			
    正则表达式匹配:     ==:等值比较;     ~:与指定正则表达式模式匹配时返回“真”,判断匹配与否时区分字符大小写:     ~*:与指定正则表达式模式匹配时返回“真”,判断匹配与否时不区分字 ...
    
			
    6. 
						
  6. Centos7 Minni 安装 执行ifconfig命令出现 -bash ifconfig command not found 的解决方法
			
    1) have a root privilege shell or be on the sudo list. 2a) At a root shell prompt (#) yum install ne ...
    
			
    7. 
						
  7. MSP430 G2553 低功耗模式LPMx
			
    MSP430除了正常运行时的active模式外,还支持五种低功耗模式(Low-power mode),分别为LPM0.LPM1.LPM2.LPM3.LPM4,由状态寄存器中的CPUOFF.OSCOFF ...
    
			
    8. 
						
  8. system.data.oracleclient 需要 8.17 需要oracle客户端问题
			
    1.下载 2.程序引用   Oracle.DataAccess.dll  其他引用放在debug下
    
			
    9. 
						
  9. JS 面向对象详解
			
    面向对象详解1 OO1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"  ...
    
			
    10. 
						
  10. iOS Objective-C 中 bool 与 BOOL 的你不一定知道的事
			
    测试一下这段代码: - (void)test { NSLog(@"this is an attribut: %d", anAttribute); ; i < ; i++) { ...
    
			
    11.