I am trying to create a dynamic Treeview in HTML using jQuery with following code,
Code with data and working example : https://jsfiddle.net/8jt0crv7/
var Menu = function(data) {
this.data = data;
};
Menu.prototype.render = function(root) {
var ul = $("<ul></ul>");
var li = $("<li></li>");
li.append($("<a></a>", {
href: this.data.url,
text: this.data.title
})).appendTo(ul);
ul.appendTo(root);
if (this.data.menu) {
Menu.renderMenus(this.data.menu, $("<li></li>").appendTo(ul));
}
};
Menu.renderMenus = function(menus, root) {
$.each(menus, function(key, val) {
var m = new Menu(val);
m.render(root);
});
console.time("Tree");
Menu.renderMenus(children, $("#container"));
console.timeEnd("Tree");
Some tests I ran on latest Chrome on Windows 10 are followings :
Tree: 129.593ms
Tree: 145.519ms
Tree: 179.777ms
Tree: 146.314ms
Tree: 174.272ms
Is there anyway I could improve performance of this code as I have trimmed it from a very big setup into example code. I am open to not use jQuery or any other plugin to make it faster.