<!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. CXF：通过WebService上传文件，包括大文件的处理

    参考网上文章,用CXF发布上传文件接口,并上传大文件的测试. 框架:spring3.1+cxf2.7.6 1.定义文件类实体 import javax.activation.DataHandler; ...

  2. DevExtreme官方视频教程分享

    收集在此,希望对使用这个工具的人有帮助 DevExtreme 1 2 3 4 5 6 DevExpress DevExtreme入门视频一:Getting Started DevExpress Dev ...

  3. CoreDataManager-Swift版-兼容iOS10以前的版本

    import UIKit import CoreData // coredata管理器 class CoreDataManager: NSObject { // 单例 static let share ...

  4. eclipse出现感叹号的解决办法

    当eclipse导入项目出现红叉但无提示错误时,去看:1>菜单路径----Window/Show View/Console2>菜单路径----Window/Show View/Error ...

  5. Android开发小问题记录

    安卓资源文件无法命名大写字母,否则导致不会生成R类!!! 资源文件的命名容许的字符为“a-z0-9_.”,即只容许有小写字母,数字0-9,下划线和点 Notification不显示 有些手机会对not ...

  6. Android Sqlite基本命令

    要查看数据库,首先必须要找到db文件,如果拷贝到电脑上,查看的方法比较多,在手机上,用命令查看比较直接和方便. 首先要找到数据库的位置,一般数据库时存放在程序的私有目录,所以要获取root权限. 确保 ...

  7. objective-c系列-NSArray

    OC数组NSArray 对比         c数组              和       oc数组对象(指针) 定义         int array[10];              NS ...

  8. Spark：一个高效的分布式计算系统

    概述 什么是Spark ◆ Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行计算框架,Spark基于map reduce算法实现的分布式计算,拥 ...

  9. json对象转为字符串，当做参数传递时加密解密

    [son对象  字符串 互相转行] 比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象: var a={"name":"tom","sex ...

  10. FileOutputStream VS FileWriter

    当我们使用Java往文件写入数据的时候,我们有两种方式,使用FileOutputStream或FileWriter. FileOutputStream: File fout = new File(fi ...