<分区>
我正在创建这个小应用程序，其想法是创建类似于留言板的东西。我正在使用 <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() ETC..？我的代码对性能有影响吗？而且，如果这段代码很好，如果要注入(inject)的代码更大，它仍然会很好吗？我知道最好的做法是尽可能将 JavaScript 与 View 分开。