Question

我想知道用于创建HTML元素的这两种技术之间的差异。我找不到任何区别。我只是想知道在任何基础上（性能或其他）是否存在差异或更多。

第一种使用JS内置方法的技术 -

var el1 = document.createElement('div');
el1.innerHTML = 'Element Div 1';
var el2 = document.createElement('span');
el2.innerHTML = ' - Span Element';
el2.classList.add('red');
document.body.appendChild(el1);
el1.appendChild(el2);
el1.id = "div";

.red {
    color: red;
    font-size: 13px;
}
#div {
    font-size: 18px;
    color: burlywood;
}

现在第二种技术只需一步 -

document.body.innerHTML = '<div id="div">Element Div 1<span class="red"> - Span Element</span></div>';

.red {
  color: red;
  font-size: 13px;
}
#div {
  font-size: 18px;
  color: burlywood;
}

这两种技术都产生相同的结果，我可以轻松地操作以（以相同的方式）两种方式中的任何一种方式创建的每个HTML元素。

Fiddle1使用第一种技术 Fiddle2使用第二种技术

看到上面的两个小提琴，我使用相同的代码来操作元素。你会看到两者产生相同的输出。那是什么让他们与众不同。第一个采取了几行，而第二个只采用了一行。 他们之间的任何性能差异？或者我没有注意到的任何其他差异。

如果我在任何地方都错了，请纠正我。

我知道第一个保留了对各种对象的引用，这些对象在代码的后期会有所帮助，但我之后并不多。我的主要问题是 - 逐个创建元素，添加属性等之间的区别，以及使用String在一步中完成它的第二个。

感谢。

Answer 1

第二种情况不仅更短，而且更快。

执行此操作时：

document.body.innerHTML = '<div id="div">Element Div 1<span class="red"> - Span Element</span></div>';

浏览器在单个事务中完成DOM填充 - 它确切地知道在多次插入之间不会发生任何事情。

在每一行的第一种情况下（＆＃34;手册和＃34; DOM群体），浏览器应确保DOM处于一致状态并至少触发DOM突变事件。

是的，第二种情况需要解析，但所有浏览器都有非常有效的HTML解析器。

创建DOM元素之间的区别：createElement，添加属性等VS创建它们的String然后附加

1 个答案: