Estoy tratando de crear una función que tome un objeto con algunos parámetros y devuelva un div recién creado.

Por lo que puedo ver, parece que hay dos formas principales de lograr esto:

• creando cada elemento por sí mismo y añadiéndolo
• creando un literal de plantilla y configurando divs innerHTML

las entradas de las funciones no son generadas por el usuario, por lo que no creo que el uso de literales de plantilla cree un problema de seguridad (infórmeme si me equivoco)

Así que ahora mis preguntas son las siguientes:

• ¿Es uno más eficiente que el otro?
• es uno preferido?
• ¿Hay alguna otra preocupación?
• ¿Hay una manera aún más eficiente/mejor?

a continuación puede ver las dos soluciones que he encontrado.

 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 }

¡Gracias de antemano!