通过 innerHTML 和 document.createElement 创建 HTML 有啥区别？ [复制]

Posted 2023-05-07

【中文标题】通过 innerHTML 和 document.createElement 创建 HTML 有啥区别？ [复制]

【英文标题】：What is difference between creating HTML by innerHTML and document.createElement? [duplicate]通过 innerHTML 和 document.createElement 创建 HTML 有什么区别？ [复制]

【发布时间】：2020-06-04 05:18:42

【问题描述】：

不知道innerhtml和document.createElement创建HTML有什么区别？

例如，我想在父 DIV 中创建一个新 DIV。

假设父 DIV 没有内容。

一个选项是parent.innerHTML = '<div></div>';

另一个选项是parent.append(document.createElement('div'));

我在一次采访中被问到这个问题。

就我个人而言，我认为创建 HTML 对象与使用 innerHTML 相比，可以让我们更灵活地在以后添加更多元素。

想知道是否有更好的理由。

【参考方案1】：

区别不大：

innerHTML 与 htmlString 一起使用，其中 createElement() 方法创建由 tagName 指定的 HTML 元素。并且很明显 string 不同于 HTML 元素。

如果使用=+，则删除带有innerHTML 的事件，因为这会重绘完整的html，但附加到createElement() 创建的元素的事件不会丢失。

演示：

document.body.innerHTML += '<div id="first">Clicking on this will not show alert as this is created with innerHTML</div>';
document.getElementById('first').addEventListener('click', function ()
  alert('hi'); // will not work
);
document.body.innerHTML += '<div>Created again with innerHTML</div>';


var newDiv = document.createElement("div");
newDiv.id = "second";
newDiv.textContent = 'Clicking on this will show alert as this is created with createElement()';
document.body.append(newDiv);
document.getElementById('second').addEventListener('click', function ()
  alert('Hi...'); // will not work
);
var newDiv2 = document.createElement("div");
newDiv2.textContent = 'Created with createElement() again';
document.body.append(newDiv2);

div
  padding: 5px 10px;
  border: 2px solid gray;
  background-color: lightblue

【参考方案2】：

除了你的答案如果你使用第一个选项： 1、添加innerHTML会立即触发DOM更新 2. 如果您需要更新新创建元素的内容，您应该从 DOM 中选择它或再次更新父元素的 innerHTML（如果子元素上有事件侦听器，将导致重新渲染，并可能丢失事件侦听器）