<!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. Office 365 - SharePoint 2013 Online 之应用程序开发

    1.给站点添加完Napa后,在网站内容里点击Napa,如下图: 2.创建一个新的app,如下图: 3.可以在Napa里添加新的项目,如下图: 4.添加新的文件,可以添加web页面.样式表.脚本,如下图 ...

  2. 导致VC不能释放的几个原因

    delegate的属性不是weak NSTimer没有invalidate block中的强引用 调用了performSelector,退出时没有cancelPerformSelectorsWithT ...

  3. Android 手机卫士--九宫格使用

    本文地址:http://www.cnblogs.com/wuyudong/p/5907736.html,转载请注明源地址. 采用GridView来实现,和ListView使用方式类似,列数(3列) 首 ...

  4. 【iOS】开发常用命令

    环境信息: Mac OS X 10.10.1 删除指定后缀名的文件 进入指定文件夹,输入: find . -name .svn | xargs rm -Rf 查看全部隐藏文件 defaults wri ...

  5. 【原+转】用CMake代替makefile进行跨平台交叉编译

    在开始介绍如何使用CMake编译跨平台的静态库之前,先讲讲我在没有使用CMake之前所趟过的坑.因为很多开源的程序,比如png,都是自带编译脚本的.我们可以使用下列脚本来进行编译: ./configu ...

  6. Mac下载安装Android Studio教程

    今天把公司闲置的一台Mac-mini重装了下系统感觉用着速度还不错,平时上班用的机器USB有些问题,所以打算用这台Mac.以往开发用Intellij Idea就够用,但是这次项目引用的jar包太多,遭 ...

  7. 15、安全工程师要阅读的书籍 - IT软件人员书籍系列文章

    信息安全工程师是一个比较新兴的角色.在2016年今年的下半年软考就将安全工程师纳入了考试科目,说明国家对安全工程师的需求还是不错的.安全工程师包括硬件和软件两块内容吧.这里描述的安全工程师主要是针对软 ...

  8. 10、技术经理要阅读的书籍 - IT软件人员书籍系列文章

    技术经理是项目组中的重要角色.他需要负责软件项目中的重要部分,如果项目组没有架构师的话,技术经理还需要担负起架构师的职责.同时,技术经理要对项目中的所有重要的技术问题进行处理. 但是,在项目组内部,软 ...

  9. ORACLE与mysql中查询第n条到第m条的数据记录的方法

    ORACLE: SELECT * FROM             (                  SELECT 表名.*, ROWNUM AS CON FROM 表名 WHERE ROWNUM ...

  10. MySQL锁机制总结(二)

    前言: Mysql是一个支持插件式存储引擎的数据库系统,本文讨论的锁机制也主要包含两部分SERVER层的锁和存储引擎的锁,存储引擎是指innodb,其它存储引暂不讨论. 1. 数据库中锁相关的基本概念 ...