<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <title>用javascript实现html元素的增删查改</title>

 <script type="text/javascript"><!--

     function $(nodeId) {

         return document.getElementById(nodeId);

     }

     function $Name(tagName) {

         return document.getElementsByTagName(tagName);

     }

     //1. 替换标签

     function replaceMsg() {

         var newNode = document.createElement("P"); //创建一个P标签 

         newNode.innerHTML = "<font color='red'>替换后的文字</font>";

         var oldNode = $Name("P")[0]; //获取body里面第一个p元素 

         oldNode.parentNode.replaceChild(newNode, oldNode); //直接替换了标签 

     }

     //2. 删除标签

     function removeMsg() {

         var node = $("p2"); //p标签 

         var nodeBtn = $("remove"); //按钮 

         //node.parentNode.removeChild(node); //下面效果相同 

         document.body.removeChild(node); //在body中删除id为P2的元素 

         //nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮 

         document.body.removeChild(nodeBtn);

         //document.body.removeNode();执行这条语句将清空body里面的任何元素 

     }

     //3. 前面添加标签

     function addbefore() {

         var newNode = document.createElement("p"); //创建P标签 

         //var newText = document.createTextNode("前面添加的元素"); 

         //newNode.appendChild(newText);//与下面效果一样 

         newNode.innerHTML = "<font color='red'>前面添加的元素</font>"; //书写P标签里面的内容 

         var oldNode = $("p3"); //目标标签 

         //document.body.insertBefore(newNode,oldNode); 

         oldNode.parentNode.insertBefore(newNode, oldNode); //在目标标签前面添加元素 

     }

     //4. 后面添加标签

     function addlast() {

         var newNode = document.createElement("p"); //创建P标签 

         //var newText = document.createTextNode("后面添加的元素"); 

         //newNode.appendChild(newText);//与下面效果一样 

         newNode.innerHTML = "<font color='red'>后面添加的元素</font>";

         var oldNode = $("p3");

         oldNode.appendChild(newNode);

         //document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素 

     }

 // --></script>

 </head>

 <body>

 <p id="p1">Hello World!

   <input type="button" value="替换内容" onclick="replaceMsg();" />

 <p id="p2">我可以被删除!

   <input type="button" id="remove" value="删除它" onclick="removeMsg();" />

 <p id="p3">在我上下添加一个元素吧！

   <input type="button" id="addbefore" value="前面添加" onclick="addbefore();" />

   <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. 原创：phoenix4.6.0连接hbase1.1.2(不使用phoenix-4.6.0-HBase-1.1-client.jar）

    官网上面的例子是在phoenix-4.6.0-HBase-1.1-client.jar完成的,这个jar包含了phoenix4.6连接hbase1.1.2所有的依赖,真是包罗万象(里面竟然还包括了se ...

  2. Android Animation学习（三） ApiDemos解析：XML动画文件的使用

    Android Animation学习(三) ApiDemos解析:XML动画文件的使用 可以用XML文件来定义Animation. 文件必须有一个唯一的根节点: <set>, <o ...

  3. 在android用Get方式发送http请求

    烦人的日子终于过去啦,终于又可以写博客啦,对自己的android学习做个总结,方便以后查看...... 一.在android用Get方式发送http请求,使用的是java标准类,也比较简单. 主要分以 ...

  4. Swift使用注意

    二.函数的可选参数 参数名:参数类型? = 默认值 // 调用的时候会发现生成了两个函数,一个带imageName,一个不带,选择不带的,调用此函数时将使用参数值nil convenience ini ...

  5. 安装和使用cocoapods

    第一步:查看自己电脑的Ruby环境:gem sources -l 1.如果已经是taobao镜像了[https://ruby.taobao.org/],此时不需要环境的修改了,直接进入第二步 2.(1 ...

  6. 常用jar包用途

    jar包 用途 axis.jar SOAP引擎包 commons-discovery-0.2.jar 用来发现.查找和实现可插入式接口,提供一些一般类实例化.单件的生命周期管理的常用方法. jaxrp ...

  7. Java基础知识学习（八）

    IO操作 5个重要的类分别是:InputStream.OutStream.Reader.Writer和File类 面向字符的输入输出流 输入流都是Reader的子类, CharArrayReader ...

  8. partproble在RHEL 6下无法更新分区信息

    在RHEL5.x版本下面,在添加磁盘分区等操作后,一直使用partproble命令使内核重新读取分区表信息,从而不用重新启动.但是最近在RHEL 6(Red Hat Enterprise Linux ...

  9. Oracle索引梳理系列（二）- Oracle索引种类及B树索引

    版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

  10. Vim指令备忘

    从网上找来的记忆图,适合于刚上手的童鞋形象记忆. 接下来的是个人在使用过程中容易忘记的命令,特此备份查看. n<space> 会向右移动这一行的n 个字元 n<Enter> 向 ...