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++ 资源大全

    原文来自于:http://blog.jobbole.com/78901/ 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz 发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据 ...

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

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

  3. Nashorn 在JDK 8中融合Java与JavaScript之力

    从JDK 6开始,Java就已经捆绑了JavaScript引擎,该引擎基于Mozilla的Rhino.该特性允许开发人员将JavaScript代码嵌入到Java中,甚至从嵌入的JavaScript中调 ...

  4. python operator模块

    官网:https://docs.python.org/3.4/library/operator.html http://pymotw.com/2/operator/

  5. 设计模式 Mixin (混入类)

    混入(mix-in)类代表类之间的另一种关系.在C++中,混入类的语法类似于多重继承,但是语义完全不同.混入类回答"这个类还可以做什么"这个问题,答案经常以"-able& ...

  6. mysql安装2

    linux下安装mysql-5.1.51.tar.gz (2010-10-27 10:59:26) 转载▼ 标签: mysql 数据库 tar.gz安装 杂谈 分类: Mysql数据库 MySQL h ...

  7. C# 绘图对象 流对象 响应对象关系

  8. Gvim一些基本配置

    介绍一些关于Gvim(windows 7 32位 Vim 7.4)的基本配置,除了特别说明,代码一律添加在安装目录下的_vimrc文件中. 1.取消自动备份,这行代码需要添加在 _vimrc文件中的b ...

  9. POJ 2289 Jamie's Contact Groups（多重匹配+二分）

    题意: Jamie有很多联系人,但是很不方便管理,他想把这些联系人分成组,已知这些联系人可以被分到哪个组中去,而且要求每个组的联系人上限最小,即有一整数k,使每个组的联系人数都不大于k,问这个k最小是 ...

  10. 【转】google chrome如何设置主页

    原文网址:http://jingyan.baidu.com/article/8275fc86bf916c46a13cf666.html google chrome是一款拥有众多优秀插件的浏览器,是我们 ...