创建具有多个子项的 div 的最有效方法

Question

我正在尝试创建一个函数，该函数采用带有几个参数的对象和 returns 新创建的 div。

据我所知，似乎有两种主要方法可以实现此目的：

单独创建每个元素并附加它
创建模板文字并设置 divs innerHTML

函数的输入不是用户生成的，所以我不认为使用模板文字会产生安全问题（如果我错了请教育我）

所以现在我的问题如下：

一个比另一个更有效吗？
是首选之一吗？
还有其他问题吗？
还有更多的efficient/better方法吗？

下面是我想出的两个解决方案。

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
}

提前致谢！

Answer 1

做下面这样的事情怎么样？

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>
  `;
}

在这种情况下，您将获得 模板文字 和 对象析构 的全部功能。

关于这些值，您应该在将它们存储到数据库之前以某种方式验证并且在之前清理 HTML拿回来。使用正则表达式进行某种简单的验证就足以进行验证。要进行清理，您可以选择许多库之一，例如 https://www.npmjs.com/package/sanitize-html.

关于性能，除非您进行多次迭代，否则我不会太认真。据我所知，这是一次函数调用。所以我会选择更简洁的方式：模板字符串。但如果你好奇的话，模板字符串是最快的。第一种方法几乎慢了 100%。您可以在此处查看我进行了 100 多次迭代的测试结果 https://jsbench.me/7gkw1t31rs/2。

请记住，我告诉您的方法将需要一个内部 HTML 一旦 createDiv 函数 returns 它的值。

创建具有多个子项的 div 的最有效方法

Most efficient way to create a div with several children

javascript

html

createelement

template-literals