哪种方法在性能方面更好/更快 - createElement 还是 innerHTML?

请不要使用 jQuery 或任何东西，而是使用纯 Js.感谢您的时间:) 解决方案 除了安全之外，使用 createElement 而不是修改 innerHTML(而不是丢弃已经存在的内容并替换它)还有几个优点，就像 Pekka 已经提到的:在附加元素时保留对 DOM 元素的现有引用当您附加到(或以其他方式修改)innerHTML 时，必须重新解析和重新创建该元素内的所有 DOM 节点.如果您保存了对节点的任何引用，它们基本上将毫无用处，因为它们不再出现.保留附加到任何 DOM 元素的事件处理程序这实际上只是最后一个的一个特例(虽然很常见).设置innerHTML 不会自动将事件处理程序重新附加到它创建的新元素，因此您必须自己跟踪它们并手动添加它们.在某些情况下，事件委托可以消除这个问题.在某些情况下可能更简单/更快如果您要进行大量添加，则绝对不想继续重置innerHTML，因为尽管对于简单更改会更快，但重复重新解析和创建元素会更慢.解决这个问题的方法是在字符串中构建 HTML 并在完成后设置 innerHTML 一次.根据具体情况，字符串操作可能比创建元素并附加它们要慢.另外，字符串操作代码可能更复杂(特别是如果你希望它是安全的).这是我有时使用的一个函数，它可以更方便地使用 createElement.function isArray(a) {return Object.prototype.toString.call(a) === "[对象数组]";}功能制作(desc){如果 (!isArray(desc)) {返回 make.call(this, Array.prototype.slice.call(arguments));}var name = desc[0];var 属性 = desc[1];var el = document.createElement(name);无功开始= 1;if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) {for (var attr in attributes) {el[属性] = 属性[属性];}开始 = 2;}for (var i = start; i < desc.length; i++) {如果(isArray(desc [i])){el.appendChild(make(desc[i]));}别的 {el.appendChild(document.createTextNode(desc[i]));}}返回 el;}如果你这样称呼它:make(["p", "这是一个 ", ["a", { href:"http://www.google.com/" }, "link"], "."]);您将获得与此 HTML 等效的内容:<p>这是一个<a href="http://www.google.com/">link</a>.</p>@Matthew Crumley 的答案I'm making divs with several sub elements something like this:<div class="item" data-id="28"> <div class="action-btns"> <button class="add"></button> <button class="rmv"></button> </div> <div class="info"> <h3>Title here</h3> <span>caption here</span> </div></div>And im giving functions to those two buttons on click. I'm wondering which method of creating these items is better - createElement or innerHTML?As far as createElement goes i like it because i can bind the onclick while creating the button inside the element and then append it. Also im wondering if appending this "item" to the parent div is faster / better than updating innerHTML += "something";As far as innerHTML goes there are fewer lines of code to write, but also i have to either write the onclick="myFunction()" inside the buttons instead of adding it dynamically.Please no jQuery or anyting but pure Js. Thanks for your time :) 解决方案 There are several advantages to using createElement instead of modifying innerHTML (as opposed to just throwing away what's already there and replacing it) besides safety, like Pekka already mentioned:Preserves existing references to DOM elements when appending elementsWhen you append to (or otherwise modify) innerHTML, all the DOM nodes inside that element have to be re-parsed and recreated. If you saved any references to nodes, they will be essentially useless, because they aren't the ones that show up anymore.Preserves event handlers attached to any DOM elementsThis is really just a special case (although common) of the last one. Setting innerHTML will not automatically reattach event handlers to the new elements it creates, so you would have to keep track of them yourself and add them manually. Event delegation can eliminate this problem in some cases.Could be simpler/faster in some casesIf you are doing lots of additions, you definitely don't want to keep resetting innerHTML because, although faster for simple changes, repeatedly re-parsing and creating elements would be slower. The way to get around that is to build up the HTML in a string and set innerHTML once when you are done. Depending on the situation, the string manipulation could be slower than just creating elements and appending them.Additionally, the string manipulation code may be more complicated (especially if you want it to be safe).Here's a function I use sometimes that make it more convenient to use createElement.function isArray(a) { return Object.prototype.toString.call(a) === "[object Array]";}function make(desc) { if (!isArray(desc)) { return make.call(this, Array.prototype.slice.call(arguments)); } var name = desc[0]; var attributes = desc[1]; var el = document.createElement(name); var start = 1; if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) { for (var attr in attributes) { el[attr] = attributes[attr]; } start = 2; } for (var i = start; i < desc.length; i++) { if (isArray(desc[i])) { el.appendChild(make(desc[i])); } else { el.appendChild(document.createTextNode(desc[i])); } } return el;}If you call it like this:make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);you get the equivalent of this HTML:<p>Here is a <a href="http://www.google.com/">link</a>.</p>The answer of @Matthew Crumley 这篇关于哪种方法在性能方面更好/更快 - createElement 还是 innerHTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！