在开始这个案例之前，需要学习一下有关于根据子关系节点获取标签的几个方法。罗列如下

/*通过关系(父子关系、兄弟关系)找标签。parentNode

获取当前元素的父节点。childNodes

获取当前元素的所有下一级子元素。firstChild

获取当前节点的第一个子节点。lastChild

获取当前节点的最后一个子节点。

------------------------------------------------------------

nextSibling		获取当前节点的下一个节点。（兄节点）

previousSibling	获取当前节点的上一个节点。（弟节点）我们可以通过标签的类型进行判断筛选：文本节点的类型： 3注释的节点类型： 8标签节点的类型： 1 */

增加附件的代码写了出来：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/*

插入目标元素的位置

	elt.insertBefore(newNode, oldNode);			添加到elt中，oldNode之前。

	注意： elt必须是oldNode的直接父节点。

	elt.removeChild(child)					删除指定的子节点

	注意： elt必须是child的直接父节点。

*/	

	function addFile(){

		//先要创建一个tr对象

		var trNode = document.createElement("tr");

		 //创建td对象

		var tdNode1 =  document.createElement("td");

		var tdNode2 =  document.createElement("td");

		//

		tdNode1.innerHTML ="<input type='file'/>";

		tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";

		//把td的节点添加到tr节点上

		trNode.appendChild(tdNode1);

		trNode.appendChild(tdNode2);

		var tbodyNode = document.getElementsByTagName("tbody")[0];

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

		tbodyNode.insertBefore(trNode,lastRow);//在lastRow这个节点前添加上trNode。tbody时lastRow（tr）的父节点

	}

	//删除附件

	function delFile(aNode){

		var trNode = aNode.parentNode.parentNode;

		var tbodyNode = document.getElementsByTagName("tbody")[0];

		tbodyNode.removeChild(trNode);

	}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

	<table>

    	<tr>

    		<td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td>

    	</tr>

        <tr id="lastRow">

        	<td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>

        </tr>

    </table>

</body>

</html>

效果展示：




javascript之DOM编程增加附件的更多相关文章

  1. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  2. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  3. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  4. 高性能JavaScript（DOM编程）

    首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...

  5. JavaScript的DOM编程--12--innerHTML属性

    innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...

  6. JavaScript的DOM编程--01--js代码的写入位置

    DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...

  7. JavaScript的DOM编程--11--插入节点

    插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...

  8. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

  9. JavaScript的DOM编程--09--节点的替换

    节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...

随机推荐

  1. sololearn的c++学习记录_4m11d

    Function Templates Functions and classes help to make programs easier to write, safer, and more main ...

  2. python的IDE(pycharm)安装以及简单配置

    使用IDE的好处 界面更友好,看起来更舒服 智能提示功能很赞,大大提高开发效率 pycharm的安装过程 去pycharm官网下载安装包,请下载专业版,建议不要去网上下载汉化版 点击安装包一直下一步即 ...

  3. 网络流24题第一题(luogu2796飞行员配对方案)

    飞行员配对方案 二分图裸题,可以拿最大流怼. 题目背景 第二次世界大战时期.. 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 ...

  4. Ubuntu命令行启动Matlab

    原文转自:http://blog.csdn.net/striker_v/article/details/52884485 小编安装的是Matlab R2015b,使用的是默认安装目录,安装在目录/us ...

  5. Lucene 6.0下使用IK分词器

    Lucene 6.0使用IK分词器需要修改修改IKAnalyzer和IKTokenizer. 使用时先新建一个MyIKTokenizer类,一个MyIkAnalyzer类: MyIKTokenizer ...

  6. 多线程（五） Fork/Join框架介绍及实例讲解

    什么是Fork/Join框架 Fork/Join框架是Java7提供了的一个用于并行执行任务的框架, 是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 我们再通过For ...

  7. 序列化战争：主流序列化框架Benchmark

    序列化战争:主流序列化框架Benchmark GitHub上有这样一个关于序列化的Benchmark,被好多文章引用.但这个项目考虑到完整性,代码有些复杂.为了个人学习,自己实现了个简单的Benchm ...

  8. linux:如何指定进程运行的CPU

    coolshell最新的文章<性能调优攻略>在"多核CPU调优"章节,提到"我们不能任由操作系统负载均衡,因为我们自己更了解自己的程序,所以,我们可以手动地为 ...

  9. Launcher3 HotSeat显示名称

    今天闲的无聊,研究了下launcher代码,看到Hotseat.java的时候,想起来以前有做过显示hotseat中应用名称,因为换了公司代码都没拿出来,就想在试着修改,看了很久发现无从下手,记得ho ...

  10. 【Unity Shader】新书封面 — Low Polygon风格的渲染

    写在前面 最近又开心又担心,因为我的书马上就要上市了,开心当然是因为等了这么久终于可以如愿了,担心是因为不少人对它的期待都很大,我第一次写书,能力也有限,不知道能不能让大家满意,让大家也都喜欢上它.不 ...