使用Jquery将子节点添加到列表

Question

我有一些按预定顺序排列的数据列表（ol）。单击一个按钮时，我需要在列表中添加一个新的子节点。该图像显示了列表数据：

例如，当我单击List 3上的“Add”按钮时，它应该创建一个新的子节点“List 3.3”并将其附加到父节点。但是如果我单击List 4“Add”按钮，它应该创建一个新的子节点“List 4.1”。 HTMl代码是：

<div class="dd" id="tree">
    <ol class="list-tree dd3-list">
        <li class="item-tree item-tree-inner" data-id="136"></li> 
        <li class="item-tree item-tree-inner" data-id="137"></li>
        <li class="item-tree item-tree-inner" data-id="135">
            <ol class="list-tree dd3-list">
                <li class="item-tree item-tree-inner" data-id="138"></li>
                <li class="item-tree item-tree-inner" data-id="86"></li>
            </ol>
        </li>
        <li class="item-tree item-tree-inner" data-id="1"></li>
    </ol>
</div>

如何使用jQuery实现这一目标？

Answer 1

该功能应该是以下几点：

var handleAdd = function (event) {
    var $this = $(this);
    if ($this.children('ol').length > 0) {
        $('<li></li>').appendTo($this.children('ol'));
    } else {
        $('<ol><li></li></ol>').appendTo($this);
    }
    event.stopPropagation();
};
$(document).on('click', 'li', handleAdd);

Answer 2

JS FIDDLE LINK

  <ol>
        <li>list1 <input type="button" value="add"/></li>
        <li>list2 <input type="button" value="add"/></li>
        <li>list3 <input type="button" value="add"/></li>
        <li>list4 <input type="button" value="add"/></li>
        <li>list5 <input type="button" value="add"/></li>
    </ol>

JQUERY

 $(document).ready(function () {

  $('body').on('click', 'ol li input', function(){
        $(this).parent().append('<ol><li>child node<input type="button" value="add" /></li></ol>');
    });
});