使用JavaScript/jQuery动态添加同级元素和子元素

我想要一个表单，让用户能够动态添加字段。我需要的是能够添加动态的子对象，并让每个子对象都能够添加其N个子对象。就像这样

Parent 1
  -- Child 1-1
  -- Child 1-2
       -- Child 1-2-1
       -- Child 1-2-2
       -- Child 1-2-3
       -- Child 1-2-4
            -- Child 1-2-4-1
            -- Child 1-2-4-2
  -- Child 1-3
  -- Child 1-4
  -- Child 1-5
     -- Child 1-5-1
Parent 2
Parent 3
  -- Child 3-1    

一切都是动态的，用户可以随心所欲地深入。到目前为止，我已经能够实现类似于JSFIDLE链接的功能，在深入两个级别之后，我陷入了困境。 附言：添加这些数字是为了显示孩子与其兄弟姐妹、父母和孩子之间的关系。 更新1：这是我到目前为止能够实现的目标：

---

更新2：在这方面做了更多的工作，并且能够做到这一点：

我不会在html中使用onclick属性，而是使用javascrip添加事件处理程序

如果您的子节点都使用相同的代码，则可以尝试使用递归方法：

function spawn(event) {
    $(this).append(child);
    $(child).on('click', function(event) {spawn(event);});
}


$('.parent').on('click', function(event) {spawn(event);});

这是（使用jquery）的第一个想法，可能会启发您

---

p、 在美国，由于没有代表发表此评论，因此这是一个答案>

基于用户3154108的答案，这里是一个递归解决方案，您可以从以下开始：

$('.parent').on('click', spawn);
function spawn(){
    var x = $('<input class="' + this.className + '-child"  type="button" value="Add Navigation" />');
    x.on('click', spawn);
    x.insertAfter(this);
}

$（'.parent'）。在（'click'，spawn'）；
函数spawn（）{
变量x=$（''）；
x、 在（'click'，spawn'）；
x、 插入者（本）；
}

---

如前所述，我已经解决了这个问题

请使用

wrapElement（）

函数根据需要将元素包装在div中。如果你失去了控制，这是密码

$('.level_1').on('click', spawn);
function spawn(){
    // check level
    var level = stripLevel(this.className);
    if (level !== '') {
        var countOthers = this.parentNode.querySelectorAll("[class^='level_" + level +"']").length;
        var x = wrapElement(level, countOthers);
        if (level.length == 1) {
            $('#addedElements').append(x);
        } else {
            //x.insertAfter(this);
            $(this).parent().append(x);
        }
    }
}

// strip level
var stripLevel = function(className) {
    var index = className.indexOf('_');
    if(index > -1) {
        return className.substr(index + 1);
    } else {
        return '';
    }
}

// wrapper element
var wrapElement = function(level, number) {
    var div = $('<div></div>');
    if (level.length == 1) {
        // it's parent
        var input = $('<input type="text" name="foo_" />');
        div.append(input);
    } else {
        // it's child
        var span = $('<span>child level ' + level + '-' + number + '</span>');
        div.append(span);
    }
    // add button
    var button = $('<input class="level_' + level + '-' + number + '"  type="button" value="Add Navigation" />');
    button.on('click', spawn);
    div.append(button);
    div.css('margin-left', (level.length * 10) + 'px');
    return div;
}

$（'.level_1'）。在（'click'，spawn'）；
函数spawn（）{
//检查液位
var-level=stripLevel（this.className）；
如果（级别！=''）{
var countOthers=this.parentNode.queryselectoral（“[class^='level_“+level+']”）长度；
var x=包装物（级别、数量和其他）；
如果（level.length==1）{
$（“#addedElements”）。追加（x）；
}否则{
//x、 插入者（本）；
$（this.parent（）.append（x）；
}
}
}
//带钢水平仪
var stripLevel=函数（类名）{
var index=className.indexOf（“”“）；
如果（索引>-1）{
返回className.substr（索引+1）；
}否则{
返回“”；
}
}
//包装器元素
var wrapElement=功能（级别、编号）{
var div=$（''）；
如果（level.length==1）{
//是父母
变量输入=$（''）；
div.append（输入）；
}否则{
//是孩子
变量span=$（'child level'+level+'-'+number+''）；
div.append（span）；
}
//添加按钮
var按钮=$（''）；
按钮。在（'click'，spawn'）；
div.append（按钮）；
div.css（'margin-left'，（level.length*10）+'px'）；
返回div；
}

好主意，到目前为止你都试过什么？如果您不知道如何执行此操作，请尝试使用jQuery/Javascript和

.append（）

或

.clone

，并使用复选框或下拉列表指示该项是子项还是新项。还有一个运行代码的

input

按钮，我能够做到这一点：@josephdreamer我一直在努力让JsFiddle工作。添加了链接，请看一看并提出建议，谢谢。谢谢你的评论。我现在只是使用

onClick（）

，至少让它工作起来。我喜欢递归函数的概念，我相信我也使用过同样的方法；添加尽可能多的父级和子级的相同函数。如果您能改进我提供的JSFIDLE链接，我将不胜感激。谢谢。这完全符合我的要求。非常感谢你，@KarelG！