用javascript实现html元素的增删查改[xyytit]
- <!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]的更多相关文章
- 一套手写ajax加一般处理程序的增删查改
倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...
- 极极极极极简的的增删查改(CRUD)解决方案
去年这个时候写过一篇全自动数据表格的文章http://www.cnblogs.com/liuyh/p/5747331.html.文章对自己写的一个js组件做了个概述,很多人把它当作了一款功能相似的纯前 ...
- MongoDB入门学习(三):MongoDB的增删查改
对于我们这样的菜鸟来说,最重要的不是数据库的管理,也不是数据库的性能,更不是数据库的扩展,而是怎么用好这款数据库,也就是一个数据库提供的最核心的功能,增删查改. 由于M ...
- 5.在MVC中使用泛型仓储模式和工作单元来进行增删查改
原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...
- jdbc的实例应用:增删查改实现
//在jdbc中进行增删查改 //查看所有 public static void findAll() { String url = "jdbc:mysql://localhost:3306/ ...
- 使用EntityFramework6完成增删查改和事务
使用EntityFramework6完成增删查改和事务 上一节我们已经学习了如何使用EF连接数据库,并简单演示了一下如何使用EF6对数据库进行操作,这一节我来详细讲解一下. 使用EF对数据库进行操作, ...
- backbonejs mvc框架的增删查改实例
一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...
- 8天学通MongoDB——第二天 细说增删查改
原文地址:http://www.cnblogs.com/huangxincheng/archive/2012/02/19/2357846.html 看过上一篇,相信大家都会知道如何开启mongodb了 ...
- EasyUI的增删查改(后台ASP.NET)
转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...
随机推荐
- ftp安全设置
1.文件介绍 /etc/pam.d/vsftpd中ftpuser.user_list文件说明:(在file=后添加改文件路径)/etc/vsftpd.conf中userlist_enable.user ...
- Android中View的绘制过程 onMeasure方法简述 附有自定义View例子
Android中View的绘制过程 onMeasure方法简述 附有自定义View例子 Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android fr ...
- android之HttpClient
Apache包是对android联网访问封装的很好的一个包,也是android访问网络最常用的类. 下面分别讲一下怎么用HttpClient实现get,post请求. 1.Get 请求 HttpGet ...
- Xcode 7中http通信出现如下错误:Application Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.
原因 在iOS9 beta1中,苹果将原http协议改成了https协议,使用 TLS1.2 SSL加密请求数据. 解决方法 编辑 info.plist,加入如下设置: <plist> & ...
- Android-SQLite版本问题
1. 用户 重来没有使用过该软件 不存在数据库,我们 1). 自动调用 void onCreate(SQLiteDatabase db) 方法 创建数据库 2).创建 表 , 3).给表插入初始化数据 ...
- 安装pods 遇到的坑
1. ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/pod 苹果系统升级 OS ...
- 【代码笔记】iOS-切换条
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- 列式存储(二)JFinal如何处理从前台传回来的二维数组
上一篇说到了列式存储,这一篇说它的存储问题,将每个模块的所有属性字段单独存到一张表中,新增页面时,所有的字段都去数据库请求,这样多个模块的新增功能可以共用一个jsp.由于每个模块的字段个数不一样,有的 ...
- git一些常用的操作(转载)
译者序:这是一篇给像我这样的新手或者是熟悉图形工具的老鸟看的.仅作为快速入门的教程. git 现在的火爆程度非同一般,它被广泛地用在大型开源项目,团队开发,以及独立开发者,甚至学生之中. 初学者非常容 ...
- eclipse中配置dtd和xsd文件实现自动提示
DTD 类型约束文件 1. Window->Preferences->XML->XML Catalog->User Specified Entries窗口中,选择Ad ...