代码之家 › 专栏 › 技术社区 › idude

在JavaScript中更改HTML而不使用innerHTML

innerhtml dom html javascript

idude · 技术社区 · 7 年前

假设我的代码非常简单,如下所示:

let content = "";

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

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

我不喜欢将HTML放入JavaScript代码中的想法,但我不知道有什么其他方法可以在不使用HTML的情况下将元素插入DOM innerHTML ,JQuery的 html()

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

提前谢谢!

4 回复 | 直到 7 年前

NickHTTPS 7 年前

你可以使用 DOMParser

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

onyx 7 年前

你可以使用 createElement() 方法

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

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>

Juan Marco 7 年前

使用JavaScript的 insertAdjacentHTML

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

这样地:

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

Here's a Fiddle example

Dr_Derp 7 年前

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

推荐文章

Robo Robok · 为什么我无法使用Dom\HTMLDocument搜索标签?

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

LLScheme · 无法使用Playwright&Pyppeteer找到关键字

1 年前

Konrad Viltersten · 无法修改ViewContainerRef的内部内容,只能在Angular中添加标签

1 年前

Eric G · 如何将svg文本元素垂直居中?

2 年前

Nail Val · 当条件通过时,If语句不显示console.log,并按意外情况继续工作

2 年前

Juan Lanus · 如何获取对所选内容的DOM元素的引用

2 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

2 年前

Toby Hogan · 元素React状态更改后未在DOM中更新

2 年前

user23745914 · 能够访问javascript中的dom元素,而无需显式定义查询选择器

2 年前