Javascript innerHTML对性能有影响吗？

我正在创建这个小应用程序，其想法是创建类似于留言板的东西。我使用

元素作为每条消息的容器。每当用户提交新消息时，它都会被添加到

列表中。我的

元素被格式化为具有特定样式。使用innerHTML方法是一个好的选择吗

目前，我正在使用Element.innerHTML方法来添加完整的代码块，并且一切正常

const messageForm = document.querySelector("#message-form")
const messageTextarea = document.querySelector("#message-textarea");
const messageList = document.querySelector("#message-list");

const messageFormatted = messageText => {
  return `
  <li class="message-item">
    <img class="message-avatar" src="./icons/boy.png" alt="Username">
      <article class="message-content">
        <p>${messageText}</p>
      </article>
      <div class="message-actions">
        <img class="action-button" src="./icons/edit.png" alt="" width="22" height="22">
        <img class="action-button" src="./icons/delete.png" alt="" width="22" height="22">
      </div>
  </li>
  `;
}

messageForm.addEventListener("submit", (e) => {
  e.preventDefault();
  if (messageTextarea.value !== "") {
    messageList.innerHTML += messageFormatted(messageTextarea.value);
    messageTextarea.value = "";
    messageTextarea.focus();
  }
})

const messageForm=document.querySelector（“消息表单”）
const messageTextarea=document.querySelector（“#message textarea”）；
const messageList=document.querySelector（“消息列表”）；
const messageFormatted=messageText=>{
返回`

${messageText}


`;
}
messageForm.addEventListener（“提交”，（e）=>{
e、 预防默认值（）；
如果（messageTextarea.value！==“”）{
messageList.innerHTML+=messageFormatted（messageTextarea.value）；
messageTextarea.value=“”；
messageTextarea.focus（）；
}
})

正如您所看到的，my

messageFormatted（）

函数返回最终将添加到html列表中的模板

---

我是否正确使用

Element.innerHTML

？或者我应该使用JavaScript DOM方法，比如

document.createElement（）

，

Element.setAttribute（）

等等。。？我的代码对性能有什么影响？而且，如果这个代码是好的，那么如果要注入的代码更大，它还会好吗？我知道最好的做法是尽可能将JavaScript从视图中分离出来。

我没有尝试任何基准测试，但无论如何，如果要注入的代码更大，那么如果使用createElement（）、setAttribute（）等函数，代码将很难读取

---

因此，使用当前方法更容易阅读。

我没有尝试任何基准测试，但无论如何，如果要注入的代码更大，那么如果使用createElement（）、setAttribute（）等函数，代码将很难阅读

---

因此，使用您当前的方法更容易阅读。

您这样做很好，但至少对我来说，我建议使用一种更干净的

元素方法。insertAdjacentHTML（）

关于性能，

Element.innerHTML

和

Element.insertAdjacentHTML（）

的性能大致相同，但第一个是属性，第二个是方法。对于更复杂的结构，您可以从

Element.insertAdjacentHTML（）

中获得更多性能，如MDN上所述，请参阅我提供的链接

关于安全性，我想提到的是，

Element.innerHTML

受到了相当多的人的反对，因为它会损坏现有的元素

我的建议是换两行

messageForm.addEventListener("submit", (e) => {
  e.preventDefault();
  if (messageTextarea.value !== "") {
    messageList.insertAdjacentHTML("afterbegin", messageFormatted(messageTextarea.value)); //use of insertAdjacentHTML
    messageTextarea.value = null; //empty
    messageTextarea.focus();
  }
})

---

您这样做很好，但至少对我来说，我建议使用一种更干净的

元素方法。insertAdjacentHTML（）

关于性能，

Element.innerHTML

和

Element.insertAdjacentHTML（）

的性能大致相同，但第一个是属性，第二个是方法。对于更复杂的结构，您可以从

Element.insertAdjacentHTML（）

中获得更多性能，如MDN上所述，请参阅我提供的链接

关于安全性，我想提到的是，

Element.innerHTML

受到了相当多的人的反对，因为它会损坏现有的元素

我的建议是换两行

messageForm.addEventListener("submit", (e) => {
  e.preventDefault();
  if (messageTextarea.value !== "") {
    messageList.insertAdjacentHTML("afterbegin", messageFormatted(messageTextarea.value)); //use of insertAdjacentHTML
    messageTextarea.value = null; //empty
    messageTextarea.focus();
  }
})

---

在现代浏览器中（比如2009年或更早版本的浏览器），

.innerHTML

速度快得惊人。您不需要使用createElement（）。您可以继续编写代码，它的编写方式非常好。使用

.innerHTML

可以重建DOM节点并重新解析DOM。它可以清除被替换内容上设置的事件处理程序，并打开安全漏洞。如果可能的话，应该避免。相反，使用DOM API构建新元素，并使用该API将它们插入DOM。在现代浏览器中（如2009年或更早版本的浏览器），

。innerHTML

速度惊人。您不需要使用createElement（）。您可以继续编写代码，它的编写方式非常好。使用

.innerHTML

可以重建DOM节点并重新解析DOM。它可以清除被替换内容上设置的事件处理程序，并打开安全漏洞。如果可能的话，应该避免。相反，使用DOM API构建新元素，并使用该API将它们插入DOM。非常感谢，我从您提供的链接中了解了insertAdjacentHtml（）。我明白你的意思了。谢谢大家!@欢迎访问RavenMask，如果您有任何问题，请随时发表评论。非常感谢，我从您提供的链接中了解了insertAdjacentHtml（）。我明白你的意思了。谢谢大家!@RavenMask欢迎您，如果您有任何问题，请随时发表评论。