附加元素与 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 干净得多。更短的代码更容易维护和更新。