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

/*通过关系(父子关系、兄弟关系)找标签。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. 628. Maximum Product of Three Numbers

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  2. hasattr(),getattr(),setattr()的使用

    # 首先你有一个command.py文件,内容如下,这里我们假若它后面还有100个方法 class MyObject(object): def __init__(self): self.x = def ...

  3. IF判断条件说明

    在Python中,任何非零整数都为true,0是false:判断条件也可以是任何序列(列表.元组.字符串):所有长度不为零的为true,否则为false,比如:空序列为false.简而言之:非0非空为 ...

  4. Docker 数据卷

    数据卷是一个可供一个或多个容器使用的特殊目录,它绕过 UFS,可以提供很多有用的特性: 数据卷可以在容器之间共享和重用 对数据卷的修改会立马生效 对数据卷的更新,不会影响镜像 卷会一直存在,直到没有容 ...

  5. Python3 元组

    Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 = ('Goog ...

  6. POSIX 消息队列相关问题

    一.查看和删除消息队列要想看到创建的posix消息队列,需要在root用户下执行以下操作:# mkdir /dev/mqueue# mount -t mqueue none /dev/mqueue删除 ...

  7. Lucene查询结果高亮

    检索结果高亮 实现效果: 核心代码 package ucas.ir.lucene; import java.io.File; import java.io.IOException; import ja ...

  8. 20160219.CCPP体系详解(0029天)

    程序片段(01):ReplaceAll.c 内容概要:ReplaceAll #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #incl ...

  9. Mybatis源码分析--返回值ResultType和ResultMap

    这一篇博客我们来介绍一下Mybatis执行sql语句返回的结果值的到实体对象的映射机制.首先ResultType和ResultMap的使用方式是不同的. ResultType的使用方式: result ...

  10. android Handler机制之ThreadLocal详解

    概述 我们在谈Handler机制的时候,其实也就是谈Handler.Message.Looper.MessageQueue之间的关系,对于其工作原理我们不做详解(Handler机制详解). Messa ...