Append Elements vs. innerHTML

Question

I want to know if it is more correct to use 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);
}

or appendChild() and create and append each child individually:

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

Which would look something like that but I didn't type every element out because I want to know which is better. I just quickly typed that out so you would understand what I mean. Thanks.

Answer 1

Both are fine, and still neither is perfect for all purposes.

• For the innerHTML version: if you feed it bad HTML, then you won't know until you look at the result. And in case of really complicated HTML (e.g. coming from a CMS) then the parsing of it may take time that becomes noticeable. Also you need to take care of escaping your outer quotes if need to use them inside the HTML. But it will be very clear what you are creating.

• For the programmed version: it won't get any faster than that, it may be more exact and debuggable, it may be easier to change (e.g. add a div layer somewhere, or move an element around) but it is also hard to guess from examining the source what you are actually creating.

So all in all, it depends.