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

/*通过关系(父子关系、兄弟关系)找标签。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. Java 程序运行过程中的内存分析

    作为 java 程序员,都应该知道 Java 程序运行在 JVM(Java Virtual Machine,Java 虚拟机)上,可以把 JVM 理解成 Java 程序和操作系统之间的桥梁,JVM 实 ...

  2. centos 挂载ntfs格式的移动硬盘

    经查找资料发现,linux也是可以支持ntfs格式分区的,只是需要安装ntfs-3g插件. CentOS挂载ntfs移动硬盘的具体步骤: 1 安装fuse. 下载fuse-2.9.3.tar.gz   ...

  3. python3+django2 开发易语言网络验证（上）

    创作背景: 在某论坛中下载到一套php开发易语言网络验证的教程,照着看下来,花了两天的时间,结果发现教程里开发的网络验证,以及随着教程一起给学员的源码,都存在着根本用不了的bug!我想要看看能不能在原 ...

  4. Tomcat中的c3p0数据库连接池的释放

    一个项目通过c3p0获得连接池,相关代码如下: public class JdbcUtil { // 连接池的核心类 private static ComboPooledDataSource data ...

  5. GC对象分配规则

    1.对象优先分配在Eden区,如果Eden区没有足够的空间时,虚拟机执行一次Minor GC. 2.大对象直接进入老年代(大对象是指需要大量连续内存空间的对象).这样做的目的是避免在Eden区和两个S ...

  6. TCP发送源码学习(3)--tcp_transmit_skb

    一.tcp_transmit_skb static int tcp_transmit_skb(struct sock *sk, struct sk_buff *skb, int clone_it, g ...

  7. Docker学习笔记1：CentOS7 下安装Docker

    本文内容摘自官网:https://docs.docker.com/engine/installation/linux/centos/#/create-a-docker-group 注:本文是介绍Lin ...

  8. Android 多窗口详解

    多窗口支持 Android N 添加了对同时显示多个应用窗口的支持. 在手持设备上,两个应用可以在"分屏"模式中左右并排或上下并排显示. 在电视设备上,应用可以使用"画中 ...

  9. 改进版getpass库

    编程伊始 正式实施 改进版 源码 以数字显示 以自定义分隔符delimiter显示 如何使用 下载及安装 在您的代码中使用 源码下载 总结 用过Linux的都知道,尤其是进行使用包管理软件类似于apt ...

  10. 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题

    前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...