`
yuexiaowen
  • 浏览: 124662 次
  • 性别: Icon_minigender_2
  • 来自: 咸阳
社区版块
存档分类
最新评论

js增加子节点

js技术 
阅读更多
<html>   
<head>        
<title></title>          
<script language="javascript">        
function add() {                   
td = document.getElementById("tdNode");
// var text = document.createElement("label"); 
var textn=document.createTextNode("hello world");
var texts=document.createTextNode("welcome");
var inText = document.createElement("input"); 
var inTexts = document.createElement("input");              
var button = document.createElement("input");                
var br = document.createElement("br"); 
                   
inText.type="text";                
inText.name="test";
inTexts.type="text";                
inTexts.name="test1";                             
button.type="button";              
button.value="del"             
button.onclick=function del(){                                                                               
td.removeChild(br); 
td.removeChild(textn);  
td.removeChild(inText);
td.removeChild(texts);    
td.removeChild(inTexts);                                                                              
td.removeChild(button);
}     
td.appendChild(br);
td.appendChild(textn);
td.appendChild(inText);
td.appendChild(texts);
td.appendChild(inTexts);
td.appendChild(button);       
}
</script>    
</head>    
<body>      
<form action="">            
<table border="1" width="35%">
<div >         
<tr>                   
<td>     
<label title="bbbbb"></label>
<input type = "text" name="test" >                                     
</td>                
</tr>
<tr>                   
<td id="tdNode"> 
<label>ddddd</label>
<input type = "text" name="test1" >                        
<input type = "button" value = "add" name="addMore" onclick ="add();">               
</td>                
</tr>
</div>           
</table>        
</form>    
</body>
</html>
分享到：
| js做的上移，下移
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    d3.js插件 拓扑图 动态增加、删除节点

    本篇文章将深入探讨如何利用d3.js插件构建动态拓扑图，并实现节点的动态增加与删除功能。 拓扑图是一种图形表示法，常用于描绘网络、系统或流程中的元素及其相互关系。在d3.js中，我们可以利用其强大的数据绑定和...

    纯js的树形菜单(添加删除节点)

    3. **插入元素**：利用`.appendChild()`或`.insertBefore()`将新元素添加到现有元素的子节点中。 4. **事件处理**：使用`.addEventListener()`为元素绑定点击、鼠标悬停等事件，实现交互功能。 接着，jQuery是一个...

    js代码-输出 id 和 level 的映射 定义 根节点的 深度 是 0，子节点的深度是父节点的 深度 + 1

    当处理子节点时，深度增加1，确保了每个节点的深度正确反映了它在树中的位置。 `README.txt`文件可能包含了关于如何使用`main.js`中代码的说明，包括输入数据的格式、预期的输出以及任何必要的配置或依赖项。如果...

    高级js可拖动节点树

    7. **边界检测**：防止节点拖放到不合法的位置，例如超出树的边界或者作为自身的子节点。 8. **回退机制**：如果拖放操作因某种原因失败，应有一个合理的回退机制，恢复到拖动前的状态。 9. **无障碍性**：考虑到...

    js代码-根节点的 深度 是 0，子节点的深度是父节点的 深度 + 1

    例如，如果根节点的深度是0，那么它的第一个子节点的深度就是1，第一个子节点的子节点的深度则是2，依此类推。 深度的概念在遍历树、查找特定节点或者计算树的高度时非常有用。遍历树通常有几种方法：前序遍历（先...

    loadtree 延迟加载 自定义事件（右键或子节点）

    在这个场景下，我们讨论的是如何在树结构组件中实现`loadtree`的延迟加载，并通过自定义事件处理用户交互，如右键点击或子节点操作。 延迟加载，或称为按需加载，是当用户滚动到特定区域或触发特定操作时才加载数据...

    js代码-NodeTraverse 参考下图，输出 id 和 level 的映射 定义 根节点的 深度 是 0，子节点的深度是父节点的 深度 + 1

    函数首先打印出当前节点的id和深度，然后对每个子节点递归调用自身，将深度增加1，这样就能得到每个节点相对于根节点的深度。 在创建树结构的部分，我们创建了四个节点，并按照题目给出的示意图建立它们之间的父子...

    ExtTreePanel新增节点

    数据模型包含节点的所有属性，如文本、图标、子节点等。 3. **创建`Ext.data.Model`** 创建节点模型通常涉及定义一个配置对象，其中包含节点的字段，如`text`（节点显示的文本）、`leaf`（是否为叶子节点）、`...

    js 实现 动态添加iframe框架

    js 实现 动态添加iframe框架! 值得下载看看!资源免费,大家分享!!

    动态树的增加删除Demo

    6. **用户界面**：项目的前端部分可能使用Web或桌面应用技术，如HTML/CSS/JavaScript、React、Vue.js或Swing、JavaFX，用于展示树形结构，并接收用户的添加、删除操作。 7. **事件驱动编程**：在用户界面中，监听...

    ztree全套的增删改查实例,包括编辑排序子节点操作，源码仅供参考

    6. **编辑排序子节点操作**：在子节点上进行排序操作，通常涉及到重新排列节点的顺序，并更新`pId`和`children`数组，以保持数据的正确性。 这些实例代码为我们展示了如何结合ZTree的API进行交互设计，同时提醒我们...

    Vue 实现树形结构非tree组件

    Vue实现树形结构，不采用tree组件，利用循环方式得到；实现全选，勾选父节点自动勾选子节点，勾选子节点反勾选相应父节点功能

    树形表格菜单 动态添加节点/动态删除节点/动态移动节点

    1.完整的包命名空间 2.自定义header footer 3.动态添加节点/动态删除节点/动态...15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现

    Echarts 实现树状图的展示与编辑示例

    增加子节点，删除子节点，删除当前节点，编辑节点 非常详细的操作，包含右键菜单的实现功能。 如果需要更详细的使用支持，可以私信咨询小编或者评论区留言，小编会在第一时间及时回复。 感觉对您有所帮助的话，还请...

    jstree目录树控件

    用户可以一次性加载所有节点，或者仅加载顶层节点，后续的子节点在用户交互时按需从服务器获取，这样既节省了带宽，又提高了页面响应速度。 3. **丰富的API和事件**：jsTree提供了一套完整的API接口，允许开发者对...

    js代码-定义 根节点的 深度 是 0，子节点的深度是父节点的 深度 + 1

    子节点的深度是基于其父节点的深度加1，这意味着每深入一层，节点的深度就增加1。这种递归的深度计算方式适用于任何层级的节点，使得我们可以轻松地获取树中任意节点的深度。 例如，如果我们有一个简单的树结构如下...

    layui-tree实现Ajax异步请求后动态添加节点的方法

    出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为父类id 的一个子分类，成功后返回到前台，然后相应的节点下动态添加子节点，主要是通过append 来增加html元素 ...

    左树节点动态拖到右侧面板

    在初始化ZTree时，可以设定异步加载的API，当用户展开节点时，ZTree会自动发送请求获取子节点数据。 3. **拖放事件监听**：ZTree提供了拖放事件接口，如`onDrag`、`onDrop`等。我们需要监听这些事件，当用户开始...

Magicbox
Global site tag (gtag.js) - Google Analytics