JavaScript之动态添加,删除节点

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

动态添加删除节点知识点:
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>

你可能感兴趣的:(JavaScript)