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. const 笔记

    .指向const的指针例如:double a=1.01;const double * b=&a;*b=2.1; //这显然是错误的a=2.1; //这是正确的,a和*b的值都会变成2.01,有 ...

  2. [转载]网络编辑必知常识:什么是PV、UV和PR值 zz

    1.什么是pv PV(page view),即页面浏览量,或点击量;通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标. 高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你网 ...

  3. nginx+uwsgi+django

    上一涨讲解了如何使用nginx+uwsgi部署wsgi application 其实django配置方式和 application都一样,因为如果我们对application进行扩展就是一个WSGI ...

  4. ExtJS 4 Grids 详解

    Grid Panel是ExtJS最常用的组件之一,它的功能非常丰富,提供了非常便捷的方法执行排序,分组,编辑数据. Basic Grid Panel 基本表格面板 让我们创建一个简单的表格,这有创建和 ...

  5. Python 日期格式化 及 schwartzian排序

    __author__ = 'root' import datetime import time import copy # 12/Dec/2012:23:59:50 # 12/Sep/2012:23: ...

  6. hadoop 异常 datanode未启动

    暴力方法:(本人是学习阶段,实际工作中不能这么做)在各个节点上执行如下操作. 将/tmp 删除 将 conf/mapred-site.xml <property> <name> ...

  7. JSP 登录页面

    1. index.jsp来提交请求 2. login.jsp来检查数据库数据 3. 需要注意的是,下载下来的mysql.conection jar包需要放到WEB-INF下面的lib文件夹下 jsp ...

  8. 1.Repeater控件

    在用到数据库数据并且要逐条显示时,就需要用到repeater\listview等这样的数据库控件进行动态的显示数据. Repeater相当于foreach的功能,用于对绑定数据源中的数据进行遍历显示, ...

  9. /dev/random和/dev/urandom的一点备忘

    1.  基本介绍 /dev/random和/dev/urandom是Linux系统中提供的随机伪设备,这两个设备的任务,是提供永不为空的随机字节数据流.很多解密程序与安全应用程序(如SSH Keys, ...

  10. Leetcode：Repeated DNA Sequences详细题解

    题目 All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: " ...