在没有innerHTML的情况下更改JavaScript中的HTML

Question

假设我的代码非常简单，如下所示：

let content = "";

for(let i=0; i<array.length; i++){
    content+='<h1>array[i]</h1>';
}

document.getElementById('some_id').innerHTML = content;

我不喜欢将 HTML 放入 JavaScript 代码中的想法，但我不知道在不使用innerHTMLJQueryhtml()方法或简单地以编程方式创建新 DOM 元素的情况下将元素插入 DOM 的任何其他方法。

在行业中或最佳实践中，从 JavaScript 插入 HTML 元素的最佳方法是什么？

提前致谢！

Answer 1

您可以使用 aDOMParser和 ES6 字符串文字：

const template = text => (
`
<div class="myClass">
    <h1>${text}</h1>
</div>
`);

您可以在内存中创建一个片段：

const fragment = document.createDocumentFragment();
const parser = new DOMParser();
const newNode = parser.parseFromString(template('Hello'), 'text/html');
const els = newNode.documentElement.querySelectorAll('div');
for (let index = 0; index < els.length; index++) {
  fragment.appendChild(els[index]);  
}
parent.appendChild(fragment);

由于文档片段位于内存中，而不是主 DOM 树的一部分，因此向其附加子级不会导致页面回流（元素位置和几何形状的计算）。从历史上看，使用文档片段可以带来更好的性能。

来源：https ://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

基本上，您可以使用任何您想要的模板，因为它只是一个返回可以输入解析器的字符串的函数。

希望能帮助到你