附加元素与 innerHTML

Question

我想知道使用是否更正确innerHTML：function createModal(){   modal = document.createElement('div');   modal.id = "modal";   modal.className = "modal";   modal.innerHTML = "<div id='modal-content' class='modal-content'><div id='modal-header' class='modal-header'><h2 id='title'>Login...</h2></div><div class='modal-body'><div class='loginContainer'><div class='loginWrapper'><div class='inpWrapper'><input name='h' placeholder='Hostname' onkeyup='enter();' autocapitalize='none' autofocus><span class='focus-border'></span></div><div class='inpWrapper'><input name='u' placeholder='Username' onkeyup='enter();' autocapitalize='none'><span class='focus-border'></span></div><div class='inpWrapper'><input type='password' name='p' placeholder='Password' onkeyup='enter();' autocapitalize='none'><span class='focus-border'></span></div></div></div><p>*You only need to log in once so you can close out of any login prompts on other pages</p></div><div class='modal-footer'><button class='save-changes' onclick='login();'>Connect</button><button class='close-modal' onclick='removeModal()'>Close</button></div></div>";   document.body.appendChild(modal);}或分别appendChild()创建和附加每个孩子：function createModal(){    modal = document.createElement('div');    modal.id = "modal";    modal.className = "modal";    var modalContent = document.createElement('div');    modalContent.id = "modal-content";    modalContent.className = "modal-content";    var modalHeader = document.createElement('div');    modalHeader.id = "modal-header";    modalHeader.className = "modal-header";    var title = document.createElement('h2');    title.id = "title";    title.innerText = "Login...";    modalHeader.appendChild(title);    modalContent.appendChild(modalHeader);}这看起来的东西一样，但我没有键入的每一个元素，因为我想知道哪个更好。我只是快速输入，所以你会明白我的意思。谢谢。

Answer 1

两者都很好，但都不是完美的。

• 对于innerHTML版本：如果你给它提供了糟糕的 HTML，那么在你查看结果之前你不会知道。如果是非常复杂的 HTML（例如来自 CMS），那么解析它可能需要一些时间，这会变得很明显。如果需要在 HTML 中使用它们，您还需要注意转义外部引号。但是很清楚你在创造什么。

• 对于编程版本：它不会比这更快，它可能更精确和可调试，它可能更容易改变（例如在某处添加一个 div 层，或移动一个元素）但也很难猜测通过检查您实际创建的源。

所以总而言之，这取决于。

Answer 2

如果你可以用更少的代码完成同样的事情，我会说那就去吧。在这种情况下，使用 innerHtml 似乎比 appendChild 干净得多。更短的代码更容易维护和更新。