我正在嘗試創建一個函式，它接受一個帶有幾個引數的物件并回傳一個新創建的 div。
從我所見，似乎有兩種主要方法可以實作這一目標：
- 自己創建每個元素并附加它
- 創建模板文字并設定 div 的 innerHTML
函式的輸入不是用戶生成的，所以我認為使用模板文字不會造成安全問題（如果我錯了，請教我）
所以現在我的問題如下：
- 一種比另一種更有效嗎？
- 是首選嗎？
- 還有其他問題嗎？
- 有沒有更有效/更好的方法？
您可以在下面看到我提出的兩種解決方案。
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 src="/static/img/${entry.img}.png" alt="創建具有多個子項的 div 的最有效方法">
<a href="${entry.url}">${entry.name}</a>
<span>${routing.innerText = entry.routing ? entry.routing : ''}</span>
<span >${entry.price}</span>
`
div.innerHTML = text
return div
}
先感謝您！
uj5u.com熱心網友回復：
做以下類似的事情怎么樣？
const createDiv = ({ exchange, img, name, url, routing: entryRouting, price }) => {
return `
<div id="${exchange}">
<img src="/static/img/${img}.png" alt="創建具有多個子項的 div 的最有效方法">
<a href="${url}">${name}</a>
<span>${routing.innerText = entryRouting || ''}</span>
<span >${price}</span>
</div>
`;
}在這種情況下，您將獲得模板文字和物件破壞的全部功能。
關于這些值，您應該在將它們存盤到資料庫之前以某種方式驗證它們，并在取回 HTML 之前對其進行清理。使用正則運算式進行某種簡單的驗證就足以進行驗證。對于消毒，您可以選擇許多庫之一，例如https://www.npmjs.com/package/sanitize-html。
關于表演，在你進行多次迭代之前，我不會太認真。據我所知，它是一個一次性函式呼叫。所以我會采用更簡潔的方式：模板字串。但如果你好奇，模板字串是最快的。第一種方法幾乎慢了 100%。您可以在https://jsbench.me/7gkw1t31rs/2 上查看我進行了 100 多次迭代的測驗結果。
請記住，一旦 createDiv 函式回傳其值，我告訴您的方法將需要一個innerHTML。
我希望我能幫到你！
讓我知道，祝你有美好的一天。
干杯，
flaco.dev
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357342.html
標籤：javascript html 创建元素 模板文字
上一篇：型別錯誤：類建構式Wia不能在沒有“new”的情況下被呼叫
下一篇：如何在反應中按百分比滾動？