javascript - 追加元素与 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 版本:如果您向它提供错误的 HTML，那么在查看结果之前您不会知道。如果是非常复杂的 HTML(例如，来自 CMS)，那么解析它可能需要花费很长时间，这会变得很明显。如果需要在 HTML 中使用它们，您还需要注意转义外部引号。但是你在创造什么会很清楚。

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

总而言之，视情况而定。