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!