JQuery treeview List-CodePudding

I try to allow user create own list with tree view, but when I select ul:last-child it doesn't run correct also if I not use ul:last-child still doesn't run correct. Here is my code snippet

JS Functions;

<script type="text/javascript">
    function addData(){
        let text = "";
        Swal.fire({
            title: 'Add Element',
            input: 'text',
            inputAttributes: {
                autocapitalize: 'off'
            },
            showCancelButton: true,
            confirmButtonText: 'Add',
            showLoaderOnConfirm: true,
            cancelButtonText: "Cancel",
            allowOutsideClick: () => !Swal.isLoading()
        }).then((text) => {
            $("#treeview ul").append("<li>" text.value "</li>");
        })
    }
    function goSubTitle(){
        $("#treeview ul li").append("<li><ul>");
    }
    function goTitle(){
        $("#treeview ul li").append("</ul></li>");
    }
</script>

here screenshots; without ul:last-child with ul:last-child

CodePudding user response：

i solved it with this changes

<script type="text/javascript">
    let code = "";
    let index= 0;
    function addData(){
        let text = "";

        Swal.fire({
            title: 'Enter your value',
            input: 'text',
            inputAttributes: {
                autocapitalize: 'off'
            },
            showCancelButton: true,
            confirmButtonText: 'Add',
            showLoaderOnConfirm: true,
            cancelButtonText: "Cancel",
            allowOutsideClick: () => !Swal.isLoading(),
            preConfirm: (text) => {
                code = parseInt($("#treeview li").length);

                $("#treeview ol." index ":last").append("<li>"   text    "</li>");
            }
        })
    }
    function goSubTitle(){
        index  = 1;
        $("#treeview li:last").append("<ol ></ol>");
    }
    function goTitle(){
        index -=1;
        if(index == 0)
        {
            index = 0;
        }
    }
</script>

index started with value of "0" and first ol looks like <ol ></ol>,

the reason of the problem, when I try to append <ul> or <li>, JQeury automatically close html tag.

CodePudding user response：

Here is full of HTML codes

<table border style="width: 100%;">
  <tr>
    <td style="width: 30%;">Your List</td>
    <td style="width: 70%;">
      <div >
        <div  id="treeview">
          <ul>
          </ul>
        </div>

        <div >
          <button  onclick="goTitle()"><</button>
        </div>

        <div >
          <button  onclick="addData()">Insert Data</button>
        </div>
        <div >
          <button  onclick="goSubTitle()">></button>
        </div>
      </div>    
    </td>
  </tr>
</table>