Javascript 带有添加按钮和分层编号的HTML节点树

如何创建一个基于JavaScript的树，在其中添加按钮，以添加额外的子元素

例如，它必须如下所示：

我需要能够添加子元素，并且我需要使数字计数也像那样工作

我尝试了jQuery

click（）

，然后添加了

append（）

，但结果并不像我预期的那样。它开始随机添加行

有没有一个简单的方法可以做到这一点，或者我只是想得太多了？我是新的编码和任何帮助将不胜感激

我是从下面开始的，但显然不是这样的：

$（'document'）.ready（函数（）{
$（'#parent'）。在（'单击'，函数（）上）{
$（“#树”）。追加（“
”）
$（“#树li:last”）.append（'ADD'）
$（“#树li:last”）。追加（“
”）
$（'child'）。在（'click'，function（）上{
$（“#tree li ul”）。追加（“
”）
$（“#tree li ul li:last”）.append（'ADD'）
$（“#tree-li-ul-li:last”）。追加（“
”）
$（'child2'）。在（'click'，function（）上{
$（“#tree li ul'）。追加（“
”）
$（“#tree li:last”）.append（'ADD'）
$（“#tree li:last”）。追加（“
”）
$（'child3'）。在（'click'，function（）上{
$（“#tree li ul li ul”）。追加（“
”）
});
});
});
});
});
ul{
列表样式类型：十进制；
}

添加
您的代码重复确实是一个问题。你不能无限期地这样做

解决方案是创建一个通用的点击处理程序，它将捕获现在或将来存在的任何按钮上的点击

对于嵌套编号，可以使用CSS函数

在使用jQuery时，我还建议您更多地依赖它提供的方法：


$（'document'）.ready（函数（）{
$（'#tree'）。在（'单击'，'按钮'，函数（）上）{
$（这个）。之前(
$（“
”）。追加(
$（“
”）。追加(
$（“”）。文本（“添加”）
)
)
);
});
});
ul{计数器重置：项}
li{显示：块}
李：在{
内容：“节点”计数器（项目“.”）；
反增量：项目
}

添加
请将您的问题显示给我们您尝试的代码中有问题的代码，否则我们无法帮助您解决问题。您在代码中的何处尝试编写图像中的“节点1.1.1”？相反，我看到的是
input
元素，这与图像非常不同。。。请澄清。@trincot我从使用输入元素开始，因为只是为了试验，我试图找到可以工作的逻辑，但您肯定可以输出“node 1.1.1”。。。你真的没有试过吗？我们非常感谢大家提出的问题……非常感谢，正如我所说，我是这方面的新手，这也是我在编码方面的第一项任务，我不知道css中的计数器选项：）