Most efficient way to create a div with several children

Question

I'm trying to create a function which takes an object with a few parameters and returns a newly created div.

From what i can see, there seem to be two main ways to accomplish this:

• creating each element by itself and appending it
• creating a template literal and set the divs innerHTML

the inputs of the functions are not user generated, so i don't think using template literals will create a security issue (please educate me if i'm wrong)

So now my questions are the following:

• is one more efficient than the other?
• is one preferred?
• are there any other concerns?
• is there an even more efficient/better way?

below you can see the two solutions i've come up with.

function createDiv (entry) {
  const div = document.createElement('div')
  div.classList.add('exchange')
  div.id = entry.exchange
  const img = document.createElement('img')
  img.src = `/static/img/${entry.img}.png`
  img.alt = entry.name
  img.classList.add('logo-image')
  div.appendChild(img)
  const link = document.createElement('a')
  link.href = entry.url
  link.classList.add('name')
  link.innerText = entry.name
  div.appendChild(link)
  const routing = document.createElement('span')
  routing.innerText = entry.routing ? entry.routing : ''
  div.appendChild(routing)
  const price = document.createElement('span')
  price.innerText = entry.price
  price.classList.add('price')
  div.appendChild(price)
  return div
}

function createDiv (entry) {
  const div = document.createElement('div')
  div.classList.add('exchange')
  div.id = entry.exchange

  let text = `
    <img class="logo-image" src="/static/img/${entry.img}.png" alt="${entry.name}">
    <a class="exchange-name" href="${entry.url}">${entry.name}</a>
    <span>${routing.innerText = entry.routing ? entry.routing : ''}</span>
    <span class="price">${entry.price}</span>
  `
  div.innerHTML = text
  return div
}

Thank you in advance!

Answer 1

What about doing something like the following?

const createDiv = ({ exchange, img, name, url, routing: entryRouting, price }) => {      
  return `
  <div class="exchange" id="${exchange}">
    <img class="logo-image" src="/static/img/${img}.png" alt="${name}">
    <a class="exchange-name" href="${url}">${name}</a>
    <span>${routing.innerText = entryRouting || ''}</span>
    <span class="price">${price}</span>
   </div>
  `;
}

In this case you are getting the full power of the template literals and of the object destructing.

About the values, you should validate them in some way before storing in the database and sanitize the HTML before getting it back. Some sort of easy validation with regex could be enough for validation. For sanitizing you can choose one of the many libraries like the this https://www.npmjs.com/package/sanitize-html.

About performances, I wouldn't take it too seriously until you do many iterations. As far as I see it is a onetime function call. So I would go for the cleaner way: template strings. But if you are curious, the template string is the fastest. The first approach is almost 100% slower. You can check the results of the test I did over 100 iterations here https://jsbench.me/7gkw1t31rs/2.

Remember that the approach I am telling you will need an innerHTML once the createDiv function returns its value.