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>
Post a Comment for "Jquery - Create Multiple DOM Elements Inside A Programmatically Created Parent Element"