Question

我正在创建这个小应用程序，其目的是创建类似于留言板的内容。我正在使用<li>元素作为每封邮件的容器。每当用户提交新消息时，它就会被添加到<ul>列表中。我的<li>元素被格式化为具有某种样式。使用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();
  }
})

您可以看到我的messageFormatted()函数返回了一个模板，该模板最终将被添加到html列表中。

我正确使用Element.innerHTML吗？还是应该使用JavaScript DOM方法，例如document.createElement()，Element.setAttribute()等？我的代码对性能有影响吗？而且，如果这段代码不错，那么如果要注入的代码更大，那还会好吗？我知道良好的做法是尽可能将JavaScript与视图分开。

Answer 1

您的操作方式还不错，但我建议至少对我来说，使用更简洁的Element.insertAdjacentHTML()

关于性能，Element.innerHTML和Element.insertAdjacentHTML()大致相同，但是第一个是属性，第二个是方法。对于更复杂的结构，您可以从{{1 }}，如MDN所述，请参阅我确实提供的链接。

关于安全性，我想提到Element.insertAdjacentHTML()受到大量人的反对，因为它会破坏现有元素。

我的建议是更改2行。

Element.innerHTML

Element.insertAdjacentHtml() on MDN

Answer 2

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

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

innerHTML是否会影响性能？

2 个答案: