注：原创作品，分享以供交流学习，转载请注明出处。
动态添加删除节点知识点：
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>
分享到：
相关推荐
在"GoJs关系图谱动态添加节点图片头像等实例"中，我们将探讨如何利用GoJs实现一个具有动态添加节点、包含图片头像等功能的关系图谱。 首先，了解GoJs的基本概念是至关重要的。GoJs中的图（Diagram）是整个可视化的...
JavaScript 实现在树形菜单中添加、删除节点实例 js note JavaScript实现在树形菜单中添加、删除节点实例，本程序侧重于学习，主要介绍一种在多级树节点中创建节点、删除节点，帮助了解树形菜单创作原理。
总的来说，实现"纯js的树形菜单(添加删除节点)"涉及到JavaScript基础、DOM操作、jQuery库的使用，以及事件处理等多方面技能。通过这样的练习，开发者可以提升对Web前端开发的理解，尤其是动态数据展示和交互设计的...
在实现动态增加节点功能时，通常需要在拓扑图的某个区域添加一个按钮，点击后触发增加节点的逻辑，新节点的初始位置可以根据现有节点的分布自动计算，或者由用户手动指定。删除节点则通常通过右键菜单或节点上的关闭...
本资源“jQuery动态添加节点循环流程图表代码”提供了利用jQuery实现动态添加节点并创建循环流程图表的方法。这样的功能在数据可视化、交互式用户界面以及流程展示等方面非常实用。 首先，我们要理解jQuery动态添加...
JavaScript 的一个重要应用领域是操作DOM（Document Object Model，文档对象模型），而DOM的核心组成部分之一就是节点（Node）。本文将详细介绍JavaScript中的节点概念，包括节点的基本类型、属性以及如何通过...
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考，具体如下： JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...
动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它是 HTML 文档的树形结构表示，...
在Java编程中，动态插入和删除节点主要涉及前端开发，特别是使用JavaScript库如jQuery时的情况。jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理、动画制作和Ajax交互。在这个场景下，"动态插入和删除节点...
在处理添加删除按钮时，需要注意事件冒泡的原理，即点击按钮时，该事件不仅在按钮上触发，还会向上传递到父节点，直至文档的根节点。在delBtnData函数中，我们通过obj参数获取当前事件发生的节点，并使用两层...
JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中，DOM（Document Object Model）是指...JavaScript 操作 DOM 可以实现动态地创建、插入、删除、克隆和访问节点，从而实现了对文档的动态操作。
5. **添加节点**：系统支持动态创建新的菜单项，可以方便地将新节点添加到现有树形结构中，这在内容管理和信息组织中非常实用。 6. **切换节点**：用户可以快速浏览并切换到不同的菜单节点，这对于导航大量层次化...
总之，"JS做的树形菜单,自定义添加节点"项目展示了JavaScript在创建动态、交互式用户界面方面的强大能力。通过理解DOM操作、事件处理、递归以及可能的CSS技巧，开发者可以创建出高效、可定制的树形菜单，满足各种...
总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...
### JavaScript 动态修改 Li 节点值的方法 #### 概述 在Web开发中，经常需要通过JavaScript来动态地操作DOM元素，比如修改列表项（`<li>`元素）的内容。这种需求常见于交互式的网站应用中，例如允许用户编辑页面上...
动态添加行指的是在用户执行特定操作（如点击按钮）时，通过JavaScript在页面上的表格或列表中插入新的行。这种功能在数据输入、展示可变数量的信息或者允许用户自定义内容的场景中非常实用。 首先，理解基本的HTML...
通过JavaScript，我们可以创建、修改和删除这些节点。 **第一种方法：先创建全部节点，再添加到文档** 在这种方法中，我们首先创建所有需要的节点，然后一次性将它们添加到文档的某个位置。这可以通过以下步骤实现...
1. appendChild：为当前节点添加一个新的子节点，放在最后的子节点后 2. cloneNode：返回当前节点的拷贝 3. createAttribute：创建新的属性 4. createCDATASection：创建包括给定数据的 CDATA 段 5. createComment：...
本篇文章主要探讨了如何在异步加载的场景下，实现树形控件（TreePanel）中节点的动态添加、删除以及ComboBox选择项的修改。 首先，让我们详细了解一下动态添加节点的过程。在Ext中，树形控件的节点可以通过...
此外，DOMDocument对象还提供了多种方法，如`appendChild`用于在子节点末尾添加新节点，`removeChild`用于删除指定子节点，`insertBefore`在特定子节点前插入新节点，`createElement`创建新元素节点等，这些都是操作...