CODEWITHSUNDEEP
javascriptjqueryhtml-tableappend
Mr. Potter
Mr. Potter

Reputation: 95

Recommended way to append multiple elements

I'd like to append multiple table rows with multiple columns to my table. What's the recommended way of doing is? I figured out three options. Advantages and disadvantages?

1:

$('table').append('<tr>...</tr>);

2:

html.push('<tr>');

elements.each(function() {
    html.push('<td>...</td>');
});

html.push('</tr>');
$('table').append(html);

3:

html = '<tr>' +
       ... +
       '</tr>';

$('table').append(html);

PS: The appended data is from my database using $.getJSON (stored in elements) and no all tds contains the same. Some of them have a span and some an input field.

Upvotes: 2

Views: 2286

Answers (2)

Ashish
Ashish

Reputation: 4330

The best way to update dom is by using createDocumentFragment.

It creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree.

DocumentFragments are DOM Node objects which are never part of the main DOM tree. The usual use case is to create the document fragment, append elements to the document fragment and then append the document fragment to the DOM tree.

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow which results in better performance.

For your case:

const dataToFill = [[1,2,3], [4,5,6], [7,8,9]]
const fragment = document.createDocumentFragment()
for (const row of dataToFill){
  const tr = document.createElement('tr')
  for (const column of row) {
    const td = document.createElement('td')
    td.textContent = column
    tr.appendChild(td)
  }
  fragment.appendChild(tr)
}
document.getElementById('my-table').appendChild(fragment)
<table id="my-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>

</table>

If you will remove document.getElementById('my-table').appendChild(fragment) You won't see the table contains, which means it is getting rendered only once outside the loop. All other operations are only done in memory.

This makes it equivalent to $('table').append('<tr>...</tr>') but in a much readable way which is easy to debug.

Upvotes: 3

SaboSuke
SaboSuke

Reputation: 792

Based on your needs I think your best option is the first one but as 'user120242' said it would be better to do it this way

$('table').append(`<tr><td>${var}</td></tr>`)

Upvotes: 1

Related Questions