在JavaScript中更改HTML而不使用innerHTML

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

let content = "";

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

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

let content=”“；
for（让i=0；i以编程方式而不是通过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);
}

const parent=document.getElementById（'some_id'）；
//清除父项（借用自https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript)
while（父母，第一个孩子）{
parent.removeChild（parent.firstChild）；
}
//循环遍历数组并以编程方式创建新元素
对于（设i=0；i您可以使用
DOMParser
和ES6字符串文字：

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

const-template=text=>(
`
${text}
`);

您可以创建内存中的片段：

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);

const fragment=document.createDocumentFragment（）；
const parser=new DOMParser（）；
const newNode=parser.parseFromString（模板（'Hello'），'text/html'）；
const els=newNode.documentElement.querySelectorAll（'div'）；
对于（让索引=0；索引

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

资料来源：

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

希望对您有所帮助
您可以使用该方法

在HTML文档中，document.createElement（）方法创建由标记名指定的HTML元素，如果无法识别标记名，则创建一个HtmlUnknowneElement

举个例子,


document.body.onload=addElement；
函数addElement（）{
//创建一个新的div元素
var newDiv=document.createElement（“div”）；
//给它一些内容
var newContent=document.createTextNode（“您好，欢迎光临！”）；
//将文本节点添加到新创建的div
newDiv.appendChild（newContent）；
//将新创建的元素及其内容添加到DOM中
var currentDiv=document.getElementById（“div1”）；
document.body.insertBefore（newDiv，currentDiv）；
}

||使用元素||
上面的文本是动态创建的。
一种使用JavaScript方法插入HTML元素的灵活且更快速（高效）的方法。它允许您精确指定元素的放置位置。可能的位置值为：


“开始前”
'afterbegin'
'beforeed'
'afterend'

像这样：

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

您可以使用
document.createElement
和
nodeYouWishToExtend.appendChild（nodeYouCreated）
。另一种方法是，您可以查看React、Angular、Vue、Knockout等框架。最佳做法是创建DOM元素对象，并在这些元素中插入文本，以防止XSSP您预感用javascript编写html“不好”基本上是正确的。我不知道
array
从哪里来，但假设它是用户可以更改的，他们可能会潜入一些“不安全”的值。例如
dobaddhing（）
。除非您转义输入，或使用转义输入的库，否则不应直接使用用户原始输入设置innerHTML。
content+='array[i]；
将不会计算
array[i]
但将其打印为文本。如果节点较多，则使用我发现的while循环清除子节点的速度较慢，我一直喜欢使用一行el.parentNode.replaceChild（el.cloneNode（false），el）元素是用假标志克隆的，假标志生成了一个没有任何子元素的副本，然后该元素被替换为更精简的自身。我确实认为它看起来比较慢，但这能处理子元素不存在的情况吗？