附加元素与 innerHTML

Posted 2023-05-07

【中文标题】附加元素与 innerHTML

【英文标题】：Append Elements vs. innerHTML

【发布时间】：2020-03-17 14:20:34

【问题描述】：

我想知道使用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);

    var modalBody = document.createElement('div');
    modalBody.id = "modal-body";
    modalBody.className = "modal-body";

    var loginContainer = document.createElement('div');
    loginContainer.className = "loginContainer";

    var loginWrapper = document.createElement('div');
    loginWrapper.className = "loginWrapper";

    var inpWrapper = document.createElement('div');
    inpWrapper.className = "inpWrapper";

    var focusBorder = document.createElement('span');
    focusBorder.className = "focus-border";

    var inpWrapper2 = document.createElement('div');
    inpWrapper2.className = "inpWrapper";

    var focusBorder2 = document.createElement('span');
    focusBorder2.className = "focus-border";

    var inpWrapper3 = document.createElement('div');
    inpWrapper3.className = "inpWrapper";

    var focusBorder3 = document.createElement('span');
    focusBorder.className = "focus-border";
    inpWrapper.appendChild(focusBorder3);

    modalContent.appendChild(modalBody);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);

哪个看起来像 something，但我没有输入每个元素，因为我想知道哪个更好。我只是快速输入，所以你会明白我的意思。谢谢。

【问题讨论】：

在什么方面更好？表现 ？第一个解决方案的可读性较低，但行数较少……第二个解决方案的可读性更高，但行数更多……我认为性能方面没有真正的区别（而且我不认为您正在寻找更好的性能）那里）

我在问哪个更正确/合适。

【参考方案1】：

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

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

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

总而言之，这取决于。

【参考方案2】：

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