Javascript 在将html附加到dom时，使用doucment片段还是字符串连接更好

我必须将卡片列表附加到dom中

html

<div class="card">  
   <div class="card-title">Card 1</div>
   <div class="card-subtext">This is card 1</div>
</div>

卡1
这是第一张卡

js

 let htmlString = '';
 for(let i = 0 ; i < arr.length ; i ++){
   htmlString += `<div class="card">  
   <div class="card-title">${arr[idx].title}</div>
   <div class="card-subtext">${arr[idx].text}</div>
   </div>`;
 }

 document.getElementByID('card-container').innerHTML = htmlString;

让htmlString=''；
for（设i=0；i

其中，arr是卡对象的数组

这样做是一种很好的做法吗？（请注意，我不想使用模板库）

---

或者我应该使用文档片段来实现相同的功能？如果是，它将如何提高性能？

我相信你不应该太担心性能，除非你正在执行大量的性能测试

以下是一些其他线程，提供了有关此问题的更多信息：

这可能会帮助你：

（简短：连接时，您正在重建整个节点，这可能会较慢）

---

有人可能会说，过早优化是万恶之源。首先要担心可读性

我相信你不应该太担心性能，除非你正在执行大量的任务

以下是一些其他线程，提供了有关此问题的更多信息：

这可能会帮助你：

（简短：连接时，您正在重建整个节点，这可能会较慢）

---

有人可能会说，过早优化是万恶之源。首先要担心可读性我首先建议一件事：

谨慎地更改DOM。对于DOM的每次添加/删除，都会调用页面的。将元素添加到DOM中最有效、最快速的方法是创建元素，在添加到DOM之前进行所有必要的修改和追加。然后将所有元素附加到一个。将docFrag附加到DOM需要一次而不是多次向DOM中添加

这是迄今为止最好的，正如在上所展示的那样。以下是两个演示：

演示1演示了元素的创建，并将它们附加到DocumentFragment（

.createDocumentFragment（）

）

演示2演示如何将字符串附加到由创建的DocumentFragment节点

演示1

var frag=document.createDocumentFragment（）；
var list=document.createElement（'ol'）；
list.className='主列表'；
for（设i=0；i<3；i++）{
var item=document.createElement（'li'）；
item.textContent='item'；
item.className='item'+i；
列表。追加子项（项目）；
}
框架附件（列表）；
文件.正文.附件（frag）我首先建议一件事：

谨慎地更改DOM。对于DOM的每次添加/删除，都会调用页面的。将元素添加到DOM中最有效、最快速的方法是创建元素，在添加到DOM之前进行所有必要的修改和追加。然后将所有元素附加到一个。将docFrag附加到DOM需要一次而不是多次向DOM中添加

这是迄今为止最好的，正如在上所展示的那样。以下是两个演示：

演示1演示了元素的创建，并将它们附加到DocumentFragment（
.createDocumentFragment（）
）


演示2演示如何将字符串附加到由创建的DocumentFragment节点


演示1

var frag=document.createDocumentFragment（）；
var list=document.createElement（'ol'）；
list.className='主列表'；
for（设i=0；i<3；i++）{
var item=document.createElement（'li'）；
item.textContent='item'；
item.className='item'+i；
列表。追加子项（项目）；
}
框架附件（列表）；
文件.正文.附件（frag）我不认为这两种方法都比另一种好——它归结为可读性和舒适度。特别是现在有了新的字符串连接，它比以前的字符串->HTML要干净得多。我更喜欢
document.createElement（）
方法，但这正是我的舒适度所在。请注意，
${arr[idx].title}
可能容易受到XSS的攻击（如果
title
来自用户输入）。我不认为这两种方法都比另一种好——它归结为可读性和舒适度。特别是现在有了新的字符串连接，它比以前的字符串->HTML要干净得多。我更喜欢
document.createElement（）
方法，但这正是我的舒适度。请注意，
${arr[idx].title}
可能容易受到XSS的攻击（如果
title
来自用户输入）。