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. 简单工厂模式的C++实现

    用简单工厂模式实现一个计算器类: #include <iostream> #include <string> using namespace std; class Operat ...

  2. List<T> ForEach break

    有没有方法扩展跳出 list.foreach循环? 理论上它其实不是一个循环,而是一个方法 代理调用内部循环   public delegate void ForEachAction<T> ...

  3. WPF学习笔记-使用自定义资源字典（style）文件

    1.添加资源字典文件style.xmal 2.在资源字典中添加自定义style等 <ResourceDictionary xmlns="http://schemas.microsoft ...

  4. 用硬件（Verilog）实现二进制码和格雷码的转换

    格雷码(Gray code)是1880年由法国工程师Jean-Maurice-Emlle Baudot发明的一种编码,是一种绝对编码方式,典型格雷码是一种具有反射特性和循环特性的单步自补码,它的循环. ...

  5. linux中硬盘及网卡的表示方法

    Linux中的所有设备均表示为/dev下的一个文件,各种IDE设备分配一个由hd前缀组成的文件:而对于各种SCSI设备,则分配了一个由sd前缀组成的文件,例如: IDE0接口上的主盘成为/dev/hd ...

  6. 【Java】理解 UDDI

    跟上规范的不断发展 统一描述.发现和集成(Universal Description, Discovery, and Integration,UDDI)项目继续丰富企业用于在 UDDI 业务注册中心表 ...

  7. requirejs 合并方案

    http://snandy.iteye.com/blog/1595464 http://www.cnblogs.com/snandy/archive/2012/03/05/2378105.html h ...

  8. Unity 网络斗地主 牌的一些算法

    Unity 网络斗地主  牌的一些算法 在这儿说一下,我的项目是用svn的方式,上传在https://v2.svnspot.com/18666451713.doudizhu这个svn上,大家可以下载T ...

  9. Problem A: The Monocycle

    uva10047:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24&am ...

  10. struts配置时遇到的几个问题

    1. struts在配置文件的时候,如果package包继承为 :extends="json-default" ,那么项目中要引入struts2-json-plugin-xxx.j ...