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. iOS工程适配64-bit经验分享

    终究还是来了.Apple下发了支持64位的最后通牒: As we announced in October, beginning February 1, 2015 new iOS apps submi ...

  2. event.preventDefault和恢复元素默认事件

    写页面事件的时候,有的时候需要用event.preventDefault取消原有的事件后进行重写,这个大家应该都知道. 那么怎么在取消默认事件后再恢复呢. 解绑我们自定义的事件就好了. 以Jquery ...

  3. study note--(Education)

    some good temoplates: A child's education has never been about learning information and basic skills ...

  4. 隐藏 response headers

    1.response headers 为何物 从上图看到..这 透漏出服务器端 1.操作系统版本, IIS版本.开发语言 .以及.net framework 版本 虽然现在IIS 可以挂php .甚至 ...

  5. CreateProcessWithLogonW（好像可以指定进程的上下文环境）

    Creates a new process and its primary thread. Then the new process runs the specified executable fil ...

  6. 协程coroutine

    协程(coroutine)顾名思义就是“协作的例程”(co-operative routines).跟具有操作系统概念的线程不一样,协程是在用户空间利用程序语言的语法语义就能实现逻辑上类似多任务的编程 ...

  7. 分页SQL模板

    select * from ( select rownum as rn ,a.* from ( select * from page a where object_id >1000 and ow ...

  8. session和cookie详解2

    http 之session和cookie http://www.cnblogs.com/ForEverKissing/archive/2008/05/23/1205503.html Session简介 ...

  9. bzoj1135

    POI阴影又发作了但这道题挺好的,比较涨知识裸的想法是裸的每次二分图匹配,但显然会TLE这里就要引入Hall定理:二分图G中的两部分顶点组成的集合分别为X, Y, X={X1, X2, X3,X4,. ...

  10. 「Poetize4」玉蟾宫

    描述 Description 这片土地被分成N*M个格子,每个格子里写着'R'或者'F',R代表这块土地被赐予了rainbow,F代表这块土地被赐予了freda.现在freda要在这里卖萌...它要找 ...