1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <title>用javascript实现html元素的增删查改</title>
  8.  
  9. <script type="text/javascript"><!--
  10.  
  11. function $(nodeId) {
  12.  
  13. return document.getElementById(nodeId);
  14.  
  15. }
  16.  
  17. function $Name(tagName) {
  18.  
  19. return document.getElementsByTagName(tagName);
  20.  
  21. }
  22. //1. 替换标签
  23. function replaceMsg() {
  24.  
  25. var newNode = document.createElement("P"); //创建一个P标签
  26.  
  27. newNode.innerHTML = "<font color='red'>替换后的文字</font>";
  28.  
  29. var oldNode = $Name("P")[0]; //获取body里面第一个p元素
  30.  
  31. oldNode.parentNode.replaceChild(newNode, oldNode); //直接替换了标签
  32.  
  33. }
  34. //2. 删除标签
  35. function removeMsg() {
  36.  
  37. var node = $("p2"); //p标签
  38.  
  39. var nodeBtn = $("remove"); //按钮
  40.  
  41. //node.parentNode.removeChild(node); //下面效果相同
  42.  
  43. document.body.removeChild(node); //在body中删除id为P2的元素
  44.  
  45. //nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮
  46.  
  47. document.body.removeChild(nodeBtn);
  48.  
  49. //document.body.removeNode();执行这条语句将清空body里面的任何元素
  50.  
  51. }
  52. //3. 前面添加标签
  53. function addbefore() {
  54.  
  55. var newNode = document.createElement("p"); //创建P标签
  56.  
  57. //var newText = document.createTextNode("前面添加的元素");
  58.  
  59. //newNode.appendChild(newText);//与下面效果一样
  60.  
  61. newNode.innerHTML = "<font color='red'>前面添加的元素</font>"; //书写P标签里面的内容
  62.  
  63. var oldNode = $("p3"); //目标标签
  64.  
  65. //document.body.insertBefore(newNode,oldNode);
  66.  
  67. oldNode.parentNode.insertBefore(newNode, oldNode); //在目标标签前面添加元素
  68.  
  69. }
  70. //4. 后面添加标签
  71. function addlast() {
  72.  
  73. var newNode = document.createElement("p"); //创建P标签
  74.  
  75. //var newText = document.createTextNode("后面添加的元素");
  76.  
  77. //newNode.appendChild(newText);//与下面效果一样
  78.  
  79. newNode.innerHTML = "<font color='red'>后面添加的元素</font>";
  80.  
  81. var oldNode = $("p3");
  82.  
  83. oldNode.appendChild(newNode);
  84.  
  85. //document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素
  86.  
  87. }
  88.  
  89. // --></script>
  90.  
  91. </head>
  92.  
  93. <body>
  94.  
  95. <p id="p1">Hello World!
  96.  
  97. <input type="button" value="替换内容" onclick="replaceMsg();" />
  98.  
  99. <p id="p2">我可以被删除!
  100.  
  101. <input type="button" id="remove" value="删除它" onclick="removeMsg();" />
  102.  
  103. <p id="p3">在我上下添加一个元素吧!
  104.  
  105. <input type="button" id="addbefore" value="前面添加" onclick="addbefore();" />
  106.  
  107. <input type="button" id="addlast" value="后面添加" onclick="addlast();" />

用javascript实现html元素的增删查改[xyytit]的更多相关文章

  1. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  2. 极极极极极简的的增删查改(CRUD)解决方案

    去年这个时候写过一篇全自动数据表格的文章http://www.cnblogs.com/liuyh/p/5747331.html.文章对自己写的一个js组件做了个概述,很多人把它当作了一款功能相似的纯前 ...

  3. MongoDB入门学习(三):MongoDB的增删查改

            对于我们这样的菜鸟来说,最重要的不是数据库的管理,也不是数据库的性能,更不是数据库的扩展,而是怎么用好这款数据库,也就是一个数据库提供的最核心的功能,增删查改.         由于M ...

  4. 5.在MVC中使用泛型仓储模式和工作单元来进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  5. jdbc的实例应用:增删查改实现

    //在jdbc中进行增删查改 //查看所有 public static void findAll() { String url = "jdbc:mysql://localhost:3306/ ...

  6. 使用EntityFramework6完成增删查改和事务

    使用EntityFramework6完成增删查改和事务 上一节我们已经学习了如何使用EF连接数据库,并简单演示了一下如何使用EF6对数据库进行操作,这一节我来详细讲解一下. 使用EF对数据库进行操作, ...

  7. backbonejs mvc框架的增删查改实例

    一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...

  8. 8天学通MongoDB——第二天 细说增删查改

    原文地址:http://www.cnblogs.com/huangxincheng/archive/2012/02/19/2357846.html 看过上一篇,相信大家都会知道如何开启mongodb了 ...

  9. EasyUI的增删查改(后台ASP.NET)

    转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...

随机推荐

  1. ftp安全设置

    1.文件介绍 /etc/pam.d/vsftpd中ftpuser.user_list文件说明:(在file=后添加改文件路径)/etc/vsftpd.conf中userlist_enable.user ...

  2. Android中View的绘制过程 onMeasure方法简述 附有自定义View例子

    Android中View的绘制过程 onMeasure方法简述 附有自定义View例子 Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android fr ...

  3. android之HttpClient

    Apache包是对android联网访问封装的很好的一个包,也是android访问网络最常用的类. 下面分别讲一下怎么用HttpClient实现get,post请求. 1.Get 请求 HttpGet ...

  4. Xcode 7中http通信出现如下错误:Application Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

    原因 在iOS9 beta1中,苹果将原http协议改成了https协议,使用 TLS1.2 SSL加密请求数据. 解决方法 编辑 info.plist,加入如下设置: <plist> & ...

  5. Android-SQLite版本问题

    1. 用户 重来没有使用过该软件 不存在数据库,我们 1). 自动调用 void onCreate(SQLiteDatabase db) 方法 创建数据库 2).创建 表 , 3).给表插入初始化数据 ...

  6. 安装pods 遇到的坑

    1.  ERROR:  While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/pod 苹果系统升级 OS ...

  7. 【代码笔记】iOS-切换条

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  8. 列式存储(二)JFinal如何处理从前台传回来的二维数组

    上一篇说到了列式存储,这一篇说它的存储问题,将每个模块的所有属性字段单独存到一张表中,新增页面时,所有的字段都去数据库请求,这样多个模块的新增功能可以共用一个jsp.由于每个模块的字段个数不一样,有的 ...

  9. git一些常用的操作(转载)

    译者序:这是一篇给像我这样的新手或者是熟悉图形工具的老鸟看的.仅作为快速入门的教程. git 现在的火爆程度非同一般,它被广泛地用在大型开源项目,团队开发,以及独立开发者,甚至学生之中. 初学者非常容 ...

  10. eclipse中配置dtd和xsd文件实现自动提示

    DTD 类型约束文件      1. Window->Preferences->XML->XML Catalog->User Specified Entries窗口中,选择Ad ...