JS 遍历动态添加子节点

最新推荐文章于 2023-06-10 18:39:47 发布
最新推荐文章于 2023-06-10 18:39:47 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： JS 文章标签： JS 子节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fujiang3673/article/details/80066139
版权 
var div = document.getElementById("parent");
while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
{
    div.removeChild(div.firstChild);
}
var node0 = document.getElementById("parent");
var node1 = document.createElement('dt');
node1.innerHTML = arr1[i]+"还有"+arr2[i].replace(/(^\s*)|(\s*$)/g,"")+"条"+arr3[i].replace(/(^\s*)|(\s*$)/g,"")+"工单未完成";
node0.insertBefore(node1);

Dou_LL
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取所有子节点/兄弟元素/追加新元素的方法
jianchibuxie0的博客
11-23 692
var oDiv=document.getElementById("div1"); /* children:获取curEle下所有的元素子节点（兼容所有浏览器），如果传递了tagName， 可以在获取的集合中进行二次晒寻，把指定标签名获取到*/ /*思想：首先获取所有的子节点（childNode），在所有的子节点中把元素节点过滤出来（nodeType==1）； ...
js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
weixin_39981681的博客
12-19 1195
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作。分享给大家供大家参考，具体如下：www.jb51.net JS节点插入function showinsert(){ //添加子节点var str=document.getElementById("mydiv");var zif="段落五";var obj=document.createElement("p"); //添加哪类节点v...
js动态添加子节点
不如养猪！
10-31 1万+
function addElement_pic(i,imgsrc,website,landingPage){ //获得ul var ul = document.getElementById("hot_web_pic"); //创建li var li = document.createElement("li"); //给li设置属性 　　 li.setAttrib
JS原生追加子节点
热门推荐
kai_l的专栏
03-17 1万+
var fragment = document.createDocumentFragment(); li = document.createElement('li'); li.className = "xxx"; fragment.appendChild(li); document.getElementById("xx").appendChild(fragment); 如上，需要先原生创
js怎样向动态列表中插入节点
weixin_42074004的博客
10-29 344
JS循环创建新节点
土拨鼠博客
07-20 1685
js创建新元素节点的方式循环数组 function list() { // 自定义数组 var arr = ['我是第一', '我是第二', '我是第三', '我是第四']; // 循环 for (var i = 0; i < arr.length; i++) { // 创建新元素节点<li>标签 var oLi = document.createElement('li'); // 找到父级元素 var oLtem = document.getElementById
js遍历子节点子元素附属性及方法
10-25
在JavaScript中，遍历子节点和子元素是常见的任务，尤其是在处理DOM（文档对象模型）时。本篇文章将详细介绍如何使用JS实现这一功能，并提供相关的属性和方法。 首先，我们可以通过`getElementById`方法获取到特定...
javascript动态修改Li节点值的方法
10-24
在`window.onload`事件中，我们遍历了`<ul>`元素（ID为`ulList`）的所有子节点。对于每个元素节点（`nodeType == 1`），我们为其双击事件`ondblclick`添加了一个处理函数。当用户双击`<li>`时，以下操作会发生： 1....
layui树形菜单动态遍历的例子
10-16
例如，对于`applyRequest`列表，我们根据`state`字段来决定是否添加子节点，如果`state`为空，表示该请求未处理，创建一个带有预览链接的子节点；反之，如果`state`不为空，表示已处理，子节点的名称中会包含处理...
Js中节点的遍历和操作
11-22
- `parentElement.appendChild(子节点)`：将子节点添加到父元素的末尾。 - `dom对象.remove()`：删除指定的DOM对象，例如删除一个按钮或列表项。 5. 示例应用： - 创建新元素：`oH1`和`oP`是通过`document....
DOMDocument 属性和方法
11-09 955
 最近发现DOMDocument对象很重要,还有XMLHTTP也很重要注意大小写一定不能弄错.属性:  1Attributes     存储节点的属性列表(只读) 2childNodes     存储节点的子节点列表(只读) 3dataType     返回此节点的数据类型 4Definition     以DTD或XML模式给出的节点的定义(只读) 5Doctype     指定
js遍历树节点下的所有子节点_javascript实现二叉树，前序中序后续遍历和查找
weixin_39826971的博客
12-03 1001
二叉树 为什么需要树这种数据结构1.数组存储方式的分析 优点：通过下标方式访问元素，速度快。对于有序数组，还可使用二分查找提高检索速度。 缺点：如果要检索具体某个值，或者插入值(按一定顺序)会整体移动，效率较低 [示意图]2.链式存储方式的分析 优点：在一定程度上对数组存储方式有优化(比如：插入一个数值节点，只需要将插入节点，链接到链表中即可， 删除效率也很好)。 缺点：在进行检索时，效率仍然较低...
js 遍历html子节点,js遍历子节点子元素附属性及方法
weixin_26969269的博客
06-28 1581
代码如下:添加子节点前 删除所有子节点var usernameEle = document.getElementById("username");var childs = usernameEle.childNodes;for(var i = childs.length - 1; i >= 0; i--) {usernameEle.removeChild(childs[i]);}var use...
python elementtree 增加子节点,python xml.etree.ElementTree追加到子元素
weixin_39918690的博客
12-24 1102
I am trying to use xml.etree.ElementTree to parse a xml file, find a specific tag, append a child to that tag, append another child to the newly created tag and add text to the latter child.My XML:tex...
DOM - 找出当前节点的子元素节点和找出当前节点的第 n 层父级元素
iteval
07-18 576
遍历任意父元素的子元素节点和找出一个元素节点的第n层父级元素的子节点。
JS多种添加div节点的方法
u010879286的博客
06-10 2125
我是同级元素insertBefore</p>").insertBefore($("#wrap"));$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));$("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));$("#wrap").append("<p class='three'>我是子元素append
JavaScript的节点操作 —— 增加节点
平凡的平淡的博客
04-28 1万+
目录 JavaScript中的节点操作分为：增、删、改、查（获取），四大类型。 我们直接利用案例来学习： HTML布局代码： JavaScript代码实现： 第一步：获取所有要用到的元素对象（可以利用id、class、name、标签获取）。 第二步：事件操作（单击事件、双击事件、鼠标移入事件、移出事件等等） 第三步：在单击事件中，所要做的操作。 在单击事件里面我们做JavaScript的核心代码 —— 添加节点。 最后出现的效果就是这样的效果： JavaScript中的...
js学习笔记之设置样式
HJHAlone的博客
03-14 770
1.排他思想 首先干掉其他人，再留下自己。 2.设置不同的背景 3.表格隔行变色
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2921
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
js 遍历 tree
最新发布
08-08
### 回答1： 在 JavaScript 中遍历树的常见方法有两种：深度优先搜索和广度优先搜索。 对于深度优先搜索，通常使用递归的方式遍历每个子树。例如： ``` function traverse(node) { console.log(node.value); for (let child of node.children) { traverse(child); } } ``` 对于广度优先搜索，通常使用队列的数据结构。例如： ``` function traverse(node) { let queue = [node]; while (queue.length > 0) { let current = queue.shift(); console.log(current.value); for (let child of current.children) { queue.push(child); } } } ``` 希望这些内容能帮到你！ ### 回答2： 在Javascript中，遍历树（Tree）是一种常见的操作，以下我将介绍三种常见的树遍历方法。 1. 深度优先遍历（DFS）： 深度优先遍历是一种先遍历子节点，再遍历兄弟节点的方法。对于一个节点，先输出当前节点的值，然后依次遍历其子节点，直到所有子节点都被遍历完毕，再遍历该节点的兄弟节点。这种方法递归地从根节点开始遍历整个树。 2. 广度优先遍历（BFS）： 广度优先遍历是一种先遍历同一层级的节点，再遍历下一层级节点的方法。对于一个节点，先输出当前节点的值，然后遍历该节点的所有子节点，再按顺序遍历子节点的子节点，以此类推，直到遍历完整棵树。这种方法通常使用队列来实现。 3. 前序遍历、中序遍历和后序遍历： 前序遍历（Pre-order）、中序遍历（In-order）和后序遍历（Post-order）是针对二叉树的遍历方法。前序遍历先输出当前节点的值，再依次遍历左子树和右子树；中序遍历先遍历左子树，然后输出当前节点的值，最后遍历右子树；后序遍历先遍历左子树和右子树，最后输出当前节点的值。这三种遍历方法也可以用来遍历一般的树结构，只需要根据需要自行定义遍历顺序。 以上是常用的树遍历方法，通过这些方法可以遍历树的所有节点，并根据需要进行相应的操作。在实际应用中，根据不同的场景和需求选择合适的遍历方式能够更高效地处理树结构的数据。 ### 回答3： 在JavaScript中遍历树状结构（tree）通常使用递归函数来完成。下面是一个示例代码： ```javascript // 定义树节点类 class Node { constructor(value) { this.value = value; this.children = []; } addChild(node) { this.children.push(node); } } // 遍历树的递归函数 function traverseTree(node) { console.log(node.value); // 输出当前节点的值 for (let i = 0; i < node.children.length; i++) { traverseTree(node.children[i]); // 递归遍历子节点 } } // 创建一个树状结构 const root = new Node(1); const child1 = new Node(2); const child2 = new Node(3); const grandchild1 = new Node(4); const grandchild2 = new Node(5); root.addChild(child1); root.addChild(child2); child1.addChild(grandchild1); child1.addChild(grandchild2); // 遍历树 traverseTree(root); ``` 上述代码中，我们首先定义了一个树节点类 `Node`，每个节点有一个值以及一个子节点数组。然后定义了 `addChild` 方法用于向节点添加子节点。 接下来，我们定义了 `traverseTree` 递归函数，它通过打印当前节点的值来实现遍历树的功能。在函数中，我们首先打印当前节点的值，然后循环遍历当前节点的子节点，并对每个子节点递归调用 `traverseTree` 函数。 最后，我们创建一个树状结构，并调用 `traverseTree` 函数来遍历这个树。 希望以上示例能够帮助你理解如何使用JavaScript来遍历树状结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值