Jquery .html without deleting element content

Question

Good Day Guys.

my scenario is I want to add a new element which is ul li on a certain tab which correspond to their own id. the code is working fine.. however I find that .append is much slower than .html... you see in my code if I change the .append to .html it will just display the last loop... since .html delete the existing elements inside and replace a new one...

what I want is to display them via .html with regards to their id.

OBJECTS

groups = [{
    GroupID: 1,
    tabPaneID: "home"
  },

  {
    GroupID: 2,
    tabPaneID: "edit"
  },

  {
    GroupID: 3,
    tabPaneID: "view"
  },

  {
    GroupID: 4,
    tabPaneID: "home"
  },

  {
    GroupID: 5,
    tabPaneID: "home"
  }
];

items = [{
  GroupID: 1,
  Item: "SampleItem1",
  Qty: 21
}, {
  GroupID: 1,
  Item: "SampleItem2",
  Qty: 21
}, {
  GroupID: 2,
  Item: "SampleItem3",
  Qty: 22
}, {
  GroupID: 3,
  Item: "SampleItem4",
  Qty: 23
}, {
  GroupID: 4,
  Item: "SampleItem5",
  Qty: 24
}, {
  GroupID: 4,
  Item: "SampleItem6",
  Qty: 25
}, {
  GroupID: 5,
  Item: "SampleItem7",
  Qty: 25
}];

JQUERY

$.each(settings.tabs, function (i, t) {
  $.each(settings.group, function (ObjID, groupObj) {
    if (t.tabPaneID == groupObj.tabPaneID) {
      $tabPane.find("#" + t.tabPaneID).append("<ul class='delta-ui-common-ul' id=group-" + groupObj.GroupID + "></ul>");

      $.each(settings.item, function (itemID, itemObj) {
        if (groupObj.GroupID == itemObj.GroupID) {
          var list = $tabPane.find("#" + t.tabPaneID);
          list.find("#group-" + groupObj.GroupID).append("<li>" + itemObj.Item + "</li>");

        }
      });
    }
  });
});

@Tushar what is the difference? is it faster than append or .html? — Sam Teng Wong, Oct 15 '15 at 04:14
Create a string of HTML markup in the loop, and then use `html` after loop to update — Tushar, Oct 15 '15 at 04:14
@Tushar so how will I know which element I will put the htmlstring? since it has regards to id? — Sam Teng Wong, Oct 15 '15 at 04:16

score 1 · Accepted Answer · answered Oct 15 '15 at 04:33

Because html() replaces you have to do the appending yourself, something like:

var current_html = list.find("#group-"+groupObj.GroupID).html();
list.find("#group-"+groupObj.GroupID).html(current_html+"<li>"+itemObj.Item+"</li>");

jQuery.append() does more than just adding text to an element so jQuery.html() is quite a bit faster.

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

Use innerHTML. It is faster than append and html.
like below

<span id='foo'>I am </span>
<script>
  document.getElementById('foo').innerHTML += '<b>HTML</b>'
</script>

.append VS .html VS .innerHTML performance

edited May 23 '17 at 11:58

Community

1
1

answered Oct 15 '15 at 04:20

J Santosh

3,808
2
22
43

doesn't work though.. I don't know why.. I've also tried this method. – Sam Teng Wong Oct 15 '15 at 04:26
can you provide a fiddle , i'll try to play around . – J Santosh Oct 15 '15 at 04:27
NO. you can't use it with jquery selector – J Santosh Oct 15 '15 at 04:31
do it like this `document.getElementById("#group-"+groupObj.GroupID).innerHTML+="
"+itemObj.Item+"

J Santosh

Oct 15 '15 at 04:35

Jquery .html without deleting element content

2 Answers2