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

/*通过关系(父子关系、兄弟关系)找标签。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. dnc开源梦之队2018 开源项目精选集

    dnc开源梦之队2018 dnc开源项目选择标准 dnc = .NET Core.dotnet core 1.支持dnc 2.x,Github star数量100以上,最近2月活跃更新 2.轻量级.示 ...

  2. jQuery 选择器 prop() 和attr()

    Day30 jQuery 1.1.1.1 什么是jQuery? n jQuery是javaScript的前端框架.对常见的对象和常用的方法进行封装,使用更方便. 它兼容CSS3,还兼容各种浏览器.文档 ...

  3. tomcat连接池配置和使用

    一种方法是在conf/context.xml文件中配置,配置oracle连接池的一个例子的context内容如下: <?xml version='1.0' encoding='utf-8'?&g ...

  4. Django URL (路由系统)

    URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个URL调用这段代码,对于那 ...

  5. Android艺术开发探索第四章——View的工作原理（下）

    Android艺术开发探索第四章--View的工作原理(下) 我们上篇BB了这么多,这篇就多多少少要来点实战了,上篇主席叫我多点自己的理解,那我就多点真诚,少点套路了,老司机,开车吧! 我们这一篇就扯 ...

  6. Android TV开发总结（六）构建一个TV app的直播节目实例

    请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52966319 近年来,Android TV的迅速发展,传统的有线电视受 ...

  7. Spark技术内幕：Storage 模块整体架构

    Storage模块负责了Spark计算过程中所有的存储,包括基于Disk的和基于Memory的.用户在实际编程中,面对的是RDD,可以将RDD的数据通过调用org.apache.spark.rdd.R ...

  8. Android EditText在ScrollView中被输入法遮挡

    千言万语不如一张图来的实在,问题如下GIF图所示[输入框被输入法挡住了]: 为了不让底部的按钮随着输入法一起起来,我把windowSoftInputMode设置为adjustPan. <acti ...

  9. 开发人员需要熟知的常用Linux命令Version、Kernel查看

    当我们需要在Linux系统中安装一些软件而去下载安装文件时,一般都需要确认到底下载哪个版本的安装包,这就需要我们知道自己的Linux系统到底是什么版本.什么内核,常见的版本.内核查看命令或者文件有如下 ...

  10. emysql add_poop() 超时出错

    emysql add_poop() 超时出错(金庆的专栏)sample/a_hello.erl 连接本机更改为连接局域网内的MySql服务器:    emysql:add_pool(hello_poo ...