Question

让我们说我的代码很简单：

let content = "";

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

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

我不喜欢将HTML放入JavaScript代码的想法，但是我不知道其他任何不使用innerHTML，JQuery的html()方法或只需以编程方式创建新的DOM元素即可。

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

谢谢！

Answer 1

您可以使用DOMParser和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

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

希望有帮助

Answer 2

您可以使用createElement()方法

在HTML文档中，document.createElement（）方法创建由tagName指定的HTML元素；如果无法识别tagName，则创建HTMLUnknownElement。

这里是一个例子，

document.body.onload = addElement;

function addElement () { 
  // create a new div element 
  var newDiv = document.createElement("div"); 
  // and give it some content 
  var newContent = document.createTextNode("Hi there and greetings!"); 
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

Answer 3

以编程方式而不是通过HTML创建元素应具有预期的效果。

const parent = document.getElementById('some_id');
// clear the parent (borrowed from https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript)

while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
}

// loop through array and create new elements programmatically
for(let i=0; i<array.length; i++){
    const newElem = document.createElement('h1');
    newElem.innerText = array[i];
    parentElement.appendChild(newElem);
}

Answer 4

使用JavaScript的insertAdjacentHTML方法插入HTML元素的一种灵活，更快捷（高效）的方法。它允许您精确指定放置元素的位置。可能的位置值为：

'beforebegin'
'afterbegin'
'beforeend'
'afterend'

赞：

 document.getElementById("some_id").insertAdjacentElement("afterbegin", content);

Here's a Fiddle example

不使用innerHTML即可在JavaScript中更改HTML

4 个答案: