<!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. 好久没做.Net开发了，今天配置IIS和.Net Framework 4.0遇到点问题
			
    装了64位的Win7后,装了VS再装IIS,结果IIS里面有.NET4.0,但是程序始终是跑不起来,最后觉得可能是因为4.0没有注册到IIS,因为之前在win2003中有遇到类似的情况.最终成功解决, ...
    
			
    2. 
						
  2. [原创]解决IPCH关闭后可能引发的无法调试的BUG
			
    前几天清理硬盘,发现大量IPCH目录,文件特别巨大,看着头大,所以决定改为临时模式,同时VS2015和VS2013我都改了,设置如下: (关键字:IPCH目录,VS大文件) 当设置好之后不会出现烦人的 ...
    
			
    3. 
						
  3. .NET基础 （20）.NET中的数据库开发
			
    ADO NET和数据库程序基础1 什么是关系型数据库2 如何通过SQL语句来实现行列转换3 ADO NET支持哪几种数据源 ADO NET和数据库的连接1 请简要叙述数据库连接池的机制2 如何提高连接 ...
    
			
    4. 
						
  4. npm是干什么的？
			
    允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. 其实npm ...
    
			
    5. 
						
  5. Android-快速查找索引篇
			
    01.Android-UI汇总 01.Android-TextView跑马灯效果 02.Android-Activity 01.Test 03.Android-数据存储 01.Test 04.Andr ...
    
			
    6. 
						
  6. jconsole连接远程tomcat
			
    windows(Windows操作系统下的远程监控) 1.编辑文件:在进入到了tomcat中的bin的目录中,进行打开catalina.bat进行编辑文件. 2.添加代码:找到文件中的如下代码 rem ...
    
			
    7. 
						
  7. Math类的三个方法比较: floor() ceil() round()
			
    public class Test { public static void main(String[] args) { double d1 = 3.4, d2 = 3.6; //正数 double  ...
    
			
    8. 
						
  8. Solr相似度算法四：IBSimilarity
			
    Information based:它与Diveragence from randomness模型非常相似.与DFR相似度模型类似,据说该模型也适用于自然语言类的文本.
    
			
    9. 
						
  9. WinRT支持GB2312
			
    在SL年代,有第三方类库支持 http://encoding4silverlight.codeplex.com 在RT版本有点不兼容,一直没时间看.今天闲的卵疼,就来一段代码兼容一下RT版本,迟点整合 ...
    
			
    10. 
						
  10. （zxing.net）一维码UPC A的简介、实现与解码
			
    一.简介 UPC(Universal Product Code)码是最早大规模应用的条码,其特性是一种长度固定.连续性的条  码,目前主要在美国和加拿大使用,由于其应用范围广泛,故又被称万用条码. U ...
    
			
    11.