<!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. Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）

    早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...

  2. 内网渗透测试思路-FREEBUF

    (在拿到webshell的时候,想办法获取系统信息拿到系统权限) 一.通过常规web渗透,已经拿到webshell.那么接下来作重要的就是探测系统信息,提权,针对windows想办法开启远程桌面连接, ...

  3. 无插件的大模型浏览器Autodesk Viewer开发培训-武汉-2014年8月28日 9:00 – 12:00

    武汉附近的同学们有福了,这是全球第一次关于Autodesk viewer的教室培训. :) 你可能已经在各种场合听过或看过Autodesk最新推出的大模型浏览器,这是无需插件的浏览器模型,支持几十种数 ...

  4. Hibernate3注解[转]

    Hibernate3注解 收藏 1.@Entity(name="EntityName") 必须,name为可选,对应数据库中一的个表 2.@Table(name="&qu ...

  5. ios8版本地图定位注意点

    学习ios地图定位 我先定义一个属性: @property (weak, nonatomic) IBOutlet MKMapView *mapV; 然后在项目运行时初始化该属性一些参数: //设置地图 ...

  6. iOS7.0后隐藏状态栏(UIStatusBar)

    现象: 升级到iOS7后,UIStatusBar的出现导致现有UI界面乱掉了. 原因: 由于写死了某些控件的绝对位置,原先隐藏UIStatusBar的代码没有在iOS7中起作用 解决方法: iOS7以 ...

  7. mac 下如何切换jdk的版本

    1.打开.bash_profile文件添加一个函数 #add a function for switch idk version.function jdkset() { if [ $# -ne 0 ] ...

  8. 【代码笔记】iOS-单例

    一,工程图. 二,代码. NetManager.h #import <Foundation/Foundation.h> @interface NetManager : NSObject + ...

  9. 快速提升word文档编写质量

    1.调整样式顺序

  10. HTML制作个人简历

    简历代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...