追加元素与 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() 并分别创建和附加每个 child：

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);
}

这看起来 有点像那样 但我没有输入每个元素，因为我想知道哪个更好。我很快就把它打出来了，这样你就会明白我的意思了。谢谢

Answer 1

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

Answer 2

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

对于innerHTML版本：如果你喂的不好HTML，那么你不看结果就知道了。如果 HTML 真的很复杂（例如来自 CMS），那么解析它可能需要花费一些时间，这会变得很明显。如果需要在 HTML 中使用它们，您还需要注意转义外部引号。但是会很清楚你在创造什么。
对于编程版本：它不会比那更快，它可能更精确和可调试，它可能更容易改变（例如在某处添加一个 div 层，或四处移动一个元素），但也很难通过检查源代码来猜测您实际创建的是什么。

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

追加元素与 innerHTML

Append Elements vs. innerHTML

javascript

innerhtml

appendchild