在没有内部 HTML 的情况下更改 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 代码中的想法，但我不知道在不使用 [ 的情况下将元素插入 DOM 的任何其他方法=13=]、JQuery 的 html() 方法，或者简单地以编程方式创建新的 DOM 元素。

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

提前致谢！

Answer 1

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

const parent = document.getElementById('some_id');
// clear the parent (borrowed from 

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 2

您可以使用 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);

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Historically, using document fragments could result in better performance.

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

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

希望对您有所帮助

Answer 3

您可以使用createElement()方法

In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

这是一个例子，

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 4

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

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

像这样：

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

Here's a Fiddle example

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

Changing HTML in JavaScript without innerHTML

html

javascript

dom

innerhtml