Jquery - Create Multiple DOM Elements Inside A Programmatically Created Parent Element

I'm creating a data-driven list with jquery. I can't figure out how to add multiple children to a parent element using jQuery's method for creating HTML elements. What am I missing

Solution 1:

I'm a big fan of avoiding putting HTML into my JavaScript. If I'm changing layout, I want to work with HTML and CSS, not javascript.

Make a template in your HTML, clone it, populate the clone and append it. We'll also use a doumentFragment so we don't repeatly update the DOM causing redraws.

var listItems = [{id: 1, title: "Main"}, {id:101, title: "Yellow Submarine"}];


function generateList(items, listElement) {
  //Set Up Template
  var s = $("#listItem")[0].innerHTML.trim(); 
  var holder = document.createElement('div');
  holder.innerHTML = s;
  var template = holder.childNodes;

  //Create doucument fragment 
  var frag = document.createDocumentFragment();
  
  //iterate the items
  items.forEach(function(item){
    //console.log(item)
    //Clone the template
    var newItem = $(template).clone();    
    //UPdate the data 
    newItem.html(newItem.html()
      .replace(/{{id}}/g, item.id)
      .replace(/{{title}}/g, item.title));
      //console.log(newItem.html());
    //Append to the fragment
    $(frag).append(newItem);
  }) ;

  //Append the fragment to the list
  $(listElement).append(frag);
}

generateList(listItems, $(".list-10"));

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-10" style="">    
</ul>

<template id="listItem">
    <li data-info="line91" name="documentationmenunull">
        <div>           
          <a href="#" data-toggle="dropdownArrow" data-target="documentationmenu{{id}}"><i class="fa fa-minus-square-o"></i></a> 
          <a href="#" class="editItem" data-target="documentation_{{id}}" data-type="Documentation" id="adocumentationmenu{{id}}">{{title}}</a> 
          <a href="#deleteModal"><span class="fa fa-trash-o deleteMenuItem" rel="tooltip" title="" data-original-title="Delete"></span></a>
          </div>
      </li>
</template>

Solution 2:

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>