[Solved] Jquery – Create multiple DOM elements inside a programmatically created parent element

by


In the end @Taplar had the suggestion for the appropriate solution. I had hoped to find a solution that worked with the code I shared originally which documentation can be found here: https://api.jquery.com/jQuery/#jQuery2.
Unfortunately it appears to be a code style that hasn’t drawn the right person’s attention or it’s not widely liked. Here’s a quick rundown of what I went with using a template literal.

<div id="documentationMenuList"></div>

<script>
function buildMenu(menu_items, name){
    var $ul = $('<ul class="list-10"></ul>');

    $.each(menu_items, function (key, value) {
        createCollapsableList(value, $ul, name);
    });

    $ul.appendTo("#"+name+"MenuList");
}

function createCollapsableList(item, $collapsableList, name) {
    if (item) {     
        if (item.title) {
            $collapsableList.append(
            `<li name="${name}Menu${item.parent_id ? item.parent_id : 0}">
                <table width="100%">
                    <tbody>
                        <tr>
                            <td>
                                <a href="#" data-toggle="dropdownArrow" data-target="${name}Menu${item.id}"><i class="fa fa-minus-square-o"></i></a> 
                                <a href="#" class="editItem" data-target="${name}_${item.id}" data-type="${name}" id="${name}Menu${item.id}">${item.title}</a> 
                                <a href="#deleteModal"><span class="fa fa-trash-o deleteMenuItem" data-toggle="tooltip" title="Delete"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </li>`);
        }
        if (item.children) {
            var $sublist = $('<ul class="list-10"></ul>');
            $.each(item.children, function (key, value) {
                createCollapsableList(value, $sublist);
            });
            $collapsableList.append($sublist);
        }
    }
}
$(function(){
    buildMenu(menu_items, 'documentation');
});
</script>

1

solved Jquery – Create multiple DOM elements inside a programmatically created parent element