JavaScript使用DOM操作节点来进行增删改操作

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>JavaScript操作DOM节点</title>

<script type="text/javascript">

	var flag = "帐号";

	var flag1 = 0;

	function modifyDOM() {

		if (flag1 == 1) {

			document.getElementById("txt").innerHTML = "帐号：";

			document.getElementById("userName").value = "fuck";

			flag1 = 0;

		}

		else if (flag1 == 0) {

			document.getElementById("txt").innerHTML = "密码：";

			document.getElementById("userName").value = "you";

			flag1 = 1;

		}

	}

	function addDOM() {

	if(flag1 == 0) {flag = "帐号";flag1 = 1;}

	else if(flag1 == 1) {flag = "密码"; flag1 = 0;}

		var para = document.createElement("a");

		var node = document.createTextNode(flag + ":");

		//var para1=document.createElement(" ");

		var para2 = document.createElement("input");

		var para3 = document.createElement("br");

		para.appendChild(node);

		var parent = document.getElementById("parent");

		var son1 = document.getElementById("son1");

		parent.insertBefore(para, son1);

		parent.appendChild(para);

		//parent.appendChild(para1);

		parent.appendChild(para2);

		parent.appendChild(para3);

	}

	function removeDOM() {

		var parent = document.getElementById("parent");

		var son1 = document.getElementById("son1");

		parent.removeChild(son1);

	}

</script>

</head>

<body>

<div id="parent">

	<div id="son1">

		<font id="txt">:</font><input type="text" id="userName" name="userName"/>

	</div>

</div>

<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>

<input type="button" value="添加DOM节点" onclick="addDOM()"/>

<input type="button" value="删除DOM节点" onclick="removeDOM()"/>

</body>

</html>

JavaScript--DOM增删改操作的更多相关文章

  1. DOM增删改操作

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  3. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  4. javaScript实现增删改查

    自己写的一个html+javaScript实现增删改查小实例.下面是js代码​1. [代码][JavaScript]代码   //1.创建受捐单位数组var arrOrgData = [    { & ...

  5. C# winform窗体设计-对数据库执行增删改操作

    对于学习数据库的人来说,数据库的增删改可谓是最基本的了(小编其实也只是一个小白=-=),这篇文章,小编将于大家讲解数据库增删改操作 在执行数据库增删改的时候主要使用的:Command 类       ...

  6. OracleHelper(对增删改查分页查询操作进行了面向对象的封装，对批量增删改操作的事务封装)

    公司的一个新项目使用ASP.NET MVC开发,经理让我写个OracleHelper,我从网上找了一个比较全的OracleHelper类,缺点是查询的时候返回DataSet,数据增删改要写很多代码(当 ...

  7. [ruby on rails] 跟我学之(3)基于rails console的查增删改操作

    本章节展开对model的介绍:包括查增删改操作.紧接着上面一节<[ruby on rails] 跟我学之HelloWorld> 创建模型 使用命令创建模型 创建表post,默认自带两栏位 ...

  8. Linq to SQL 简单的增删改操作

    Linq to SQL 简单的增删改操作. 新建数据库表tbGuestBook.结构如下: 新建web项目,完成相应的dbml文件.留言页面布局如下 <body> <form id= ...

  9. Hibernate双向关联的增删改操作的属性

    双向关联关系下的增删改操作的属性                    1.cascade属性:  eg:<set name = "emps" cascade="s ...

随机推荐

  1. Mvc Controller 单元测试 Mock User.Identity.Name

    被测试的Action 包含 User.Identity.Name 代码,在写测试代码需要Mock ControllerContext对象 代码如下: var mock = new Mock<Co ...

  2. Java 可视化垃圾回收

    基础 当谈到释放不再使用的内存,垃圾回收已经在很大程度上取代了早期技术,比如手动内存管理和引用计数. 这是件好事,因为内存管理令人厌烦,学究式地簿记是计算机擅长的,而不是人擅长的.在这方面,语言的运行 ...

  3. Tengine简单安装

    跟NGINX一样,没有深入研究配置,因为暂时用不到..:) 下载2.10,基于NGINX1.6.2的. 我的配置参数如下: ./configure --with-openssl=/root/tengi ...

  4. Fishnet（计算几何）

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1642   Accepted: 1051 Description A fis ...

  5. POJ3087 Shuffle'm Up(模拟)

    题目链接. AC代码如下; #include <iostream> #include <cstdio> #include <cstring> #include &l ...

  6. vector::erase returns incompatible iterator in debug build

    关于std::vector中erase的用法http://www.cplusplus.com/reference/vector/vector/erase/ #include <vector> ...

  7. Android SDK更新失败最新解决方案

    解决方案: 将https修改为http://在Android SDK manager中,的tools文件夹下,选择options...选项, 勾选 Force https//... sources t ...

  8. centos 安装node js环境

    node.js支持多种平台安装,其中Win平台安装比较简单,下面重点讲解下Linux平台的安装步骤.本文以CentOS平台为实例,不准备讲 解采取源码编译安装方式,而是采取在node.js网站下载已经 ...

  9. hdoj 4552 怪盗基德的挑战书【求前缀在字符串中出现的次数之和】

    怪盗基德的挑战书 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Su ...

  10. jSP的3种方式实现radio ,checkBox,select的默认选择值。

    jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...