<!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. Oracle11gR2用EXP导出时报EXP-00011错误的解决

    C:\>exp businessdata/businessdata file=dropcol.dmp tables=ACSTRULE,ARREARSCFG,ARREARS_REPORT_ACCT ...

  2. VirtualBox & Kaili Linux 环境搭建

    勾选启用PAE/NX 勾选固态驱动器 网卡设置 [添加源] 2016.1月版添加源 cat << EOF > /etc/apt/sources.list deb http://htt ...

  3. git 设置 key 到服务器，同步代码不需要输入用户名和密码

    1  ssh-keygen -t rsa 2  vim ~/.ssh/id_rsa.pub 3. 添加到git 服务器,这样同步代码就不需要输入密码

  4. 模态视图的modalTransitionStyle、modalPresentationStyle

    1.modalTransitionStyle: 它是使用- (void)presentViewController:(UIViewController *)viewControllerToPresen ...

  5. 【代码笔记】iOS-带输入框的UIAlertView

    一,效果图. 二,代码. //点击任何处,弹出输入框 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ UIAlertV ...

  6. jQuery删除节点和追加节点

    for (var i in checkedBoxIds) { var $td = $("#" + checkedBoxIds[i]).parent().parent().detac ...

  7. ThinkPHP 空方法 显示

    TP如果  一个控制器 没有一个方法 ,只要有一个模版,URL会对应显示模版名称. 例子 http://localhost/yiyunmap/map/test map控制器 并没有 test方法 但是 ...

  8. android Gui系统之SurfaceFlinger(3)---SurfaceFlinger

    7.SurfaceFlinger SurfaceFlinger在前面的篇幅了,多有涉及. SurfaceFlinger是GUI刷新UI的核心,所以任何关于SurfaceFlinger的改进都会对and ...

  9. #VSTS日志# 2015/12/10 – 终于可以删除工作项了

    最近的更新不少,废话少说,直接上干货 定制工作项字段 本周的更新后,所有的用户都可以在vsts上直接给工作项添加字段了,具体内容包括– 添加新字段(日期,字符串,整形,数字)– 字段显示位置配置– 过 ...

  10. SQL Server 2012实施与管理实战指南(笔记)——Ch4数据库连接组件

    4.数据库连接组件 访问数据库有多种不同的技术,包括ADO,ODBC,OLEDB,ADO.NET等这些都有一些共性.首先要建立连接(Connection),然后通过命令(Command)对数据库进行访 ...