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

/*通过关系(父子关系、兄弟关系)找标签。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. Linux pip安装使用

    pip安装使用详解 pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法. 1.pip下载安装 1.1 pip下载   1 # wget " ...

  2. [HCNA]VLAN配置Hybrid接口

    实验名称 VLAN配置Hybrid接口 日期 2018年4月13日 实验目的 1.掌握配置Hybrid接口的方法. 2.理解Hybrid接口处理Untagged数据帧过程 3.理解Hybrid接口处理 ...

  3. JavaScript基础知识必知！！！

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. JS作用:表单验证,减轻服务端的压力:添加页面动画效果:动态更改页面内容:Ajax网络请求. 下面简单介 ...

  4. ACM Ignatius and the Princess II

    Problem Description Now our hero finds the door to the BEelzebub feng5166. He opens the door and fin ...

  5. Linux 下的一个全新的性能测量和调式诊断工具 Systemtap, 第 2 部分: DTrace

    DTrace的原理本系列文章详细地介绍了一个 Linux 下的全新的调式.诊断和性能测量工具 Systemtap 和它所依赖的基础 kprobe 以及促使开发该工具的先驱 DTrace 并给出实际使用 ...

  6. windows curl命令详解

    概述 Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景,因此这里研究下如何在windows下执行curl命令. 软件下载 下载地址:https://cur ...

  7. XMPP 测试工具

    XMPP 测试工具(金庆的专栏 2016.10)XMPP的客户端Pidgin有个Debug Window, 可以显示所有发送和接收的xml节.但是无法发送任意的自定义节.<XMPP高级编程-使用 ...

  8. ViewPager实现滑屏切换页面及动画效果（仿优酷客户端）

     找了许多实现该功能的例子,但效果都不很理想,于是自己结合网上的资源及自己的总结,整理了一下,发出来,供大家参考.这个是自己做的,仿优酷客户端的. 先看效果: ****************** ...

  9. Spark Scheduler模块源码分析之TaskScheduler和SchedulerBackend

    本文是Scheduler模块源码分析的第二篇,第一篇Spark Scheduler模块源码分析之DAGScheduler主要分析了DAGScheduler.本文接下来结合Spark-1.6.0的源码继 ...

  10. Ejb远程调用-jboss服务器调用服务器-Bean调用Bean

    英文参考地址 https://docs.jboss.org/author/display/AS71/Remote+EJB+invocations+via+JNDI+-+EJB+client+API+o ...