<分区>
<分区>
我想知道这两种用于创建 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使用第二种技术
请参阅上面的两个 fiddle ，我使用了相同的代码来操作元素。正如您将看到的，两者都产生相同的输出。那么是什么让他们与众不同。第一个需要几行，而第二个只有 1 行。 它们之间有任何性能差异吗？？或者它们之间存在我没有注意到的任何其他差异。
如果我哪里错了，请纠正我。
而且我知道第一个保留了对各种对象的引用，这在以后的代码中可能会有帮助，但在那之后我就不多了。我的主要问题是 - 一个一个地创建元素、添加属性等与第二个使用 String 一步完成的区别。
谢谢。
最佳答案
第二种情况不仅更短而且总体上更快。
当你这样做时:
document.body.innerHTML = '<div id="div">Element Div 1<span class="red"> - Span Element</span></div>';
浏览器在单个事务中填充 DOM - 它确切地知道在多次插入之间不会发生任何事情。
在第一种情况下(“手动”DOM 填充)，浏览器应确保 DOM 处于一致状态并至少触发 DOM 突变事件。
是的，第二种情况需要解析，但所有浏览器都有非常有效的 HTML 解析器。
关于javascript - 创建 DOM 元素 : createElement, 添加属性等与创建它们的字符串然后追加之间的区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32805020/