JavaScript之动态添加，删除节点

最新推荐文章于 2024-07-18 21:13:18 发布

iteye_16498

最新推荐文章于 2024-07-18 21:13:18 发布

阅读量311

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_16498/article/details/82579415

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

注：原创作品，分享以供交流学习，转载请注明出处。

动态添加删除节点知识点：
1，用到html document的getElementById，createElement方法。
2，用到html控件的appendChild，removeChild，parentNode等方法。
3，动态添加节点，如果节点的类型是iframe，可用来进行下载。

实例：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
       //添加一个节点
       function addElement()
       {
    	   //获得页面上的容器div（添加、删除元素都是在此div里面）
    	   var div = document.getElementById("mydiv");
    	   //用document的createElement()方法创建要添加的控件
    	   var addElement = document.createElement("input");
    	   //设置控件的属性
    	   addElement.type = "button"
    	   addElement.id = "addElement";
    	   //用空间的appenChild方法来执行添加操作。
    	   div.appendChild(addElement);
       }

       //删除控件（这里要删除id为addElement的元素）
       function delElement()
       {
    	   //第一种方式：
    	   //var deleElement = document.getElementById("addElement");
    	   //document.getElementById("mydiv").removeChild(deleElement);

    	   //第二种方式(比较灵活推荐使用)：
    	   var deleElement = document.getElementById("addElement");
    	   var parentElement = deleElement.parentNode;
    	   parentElement.removeChild(deleElement);
       }

       //添加一个iframe,用来下载,irrame的src如果是后台的输出文件Action则可用来下载。
       function addIframe()
       {
    	   //获得页面上的容器div（添加、删除元素都是在此div里面）
    	   var div = document.getElementById("mydiv");
    	   //用document的createElement()方法创建要添加的控件
    	   var addElement = document.createElement("iframe");
    	   //设置控件的属性
    	   addElement.id = "downIframe";
    	   addElement.src = "http://www.baidu.com";
    	   //用空间的appenChild方法来执行添加操作。
    	   div.appendChild(addElement);
       }

       //删除iframe
       function delElement()
       {
    	   var deleElement = document.getElementById("downIframe");
    	   var parentElement = deleElement.parentNode;
    	   parentElement.removeChild(deleElement);
       }
    </script>
  </head>
  <body>
     <div id="mydiv">
         <input type="button" id="addButton" value="添加一个按钮" onclick="addElement()">
         <input type="button" id="delButton" value="删除一个按钮" onclick="delElement()">
         <input type="button" id="addIframe" value="添加iframe下载" onclick="addIframe()">
         <input type="button" id="delIFrame" value="删除iframe" onclick="delElement()">
     </div>
  </body>
</html>