Creating dynamically DOM structure with prepend and append

Question

I would like to create dynamically (with jQuery) the following structure :

      <div id="mainWindow">
        <div id="webgl">
          <div id="global-ui">
            <div id="gui"></div>
            <div id="buttons-wrapper">  
            <div id="buttons">
            <button type="button" id="startButtonId" class="btn btn-primary btn-xs" tabindex="13">Start</button>
            <button type="button" id="resetButtonId" class="btn btn-default btn-xs" tabindex="14">Reset</button>
            <button type="submit" id="saveButonId" class="btn btn-primary btn-xs">Save to file</button> 
            </div>
            </div>
            </div>
         </div>
       </div> 
   

Here what I have done (with popID = 'mainWindow' and HTML code already contains "<div id="mainWindow"></div>") :

// Initialization of component objects                                               
    webGlDiv = document.createElement('div');                                            
    webGlDiv.id = 'webgl';                                                               
    $('#'+popID).prepend(webGlDiv);                                                      
    globalUiDiv = document.createElement('div');                                         
    globalUiDiv.id = 'global-ui';                                                        
    $('#'+webGlDiv.id).prepend(globalUiDiv);                                             
    guiDiv = document.createElement('div');                                              
    guiDiv.id = 'gui';                                                                   
    $('#'+globalUiDiv.id).append(guiDiv);                                                
    buttonsWrapperDiv = document.createElement('div');                                   
    buttonsWrapperDiv.id = 'buttons-wrapper';                                            
    $('#'+globalUiDiv.id).prepend(buttonsWrapperDiv);                                    
    buttonsDiv = document.createElement('div');                                          
    buttonsDiv.id = 'buttons';                                                           
    $('#'+buttonsWrapperDiv.id).prepend(buttonsDiv);                                     
    startButton.id = 'startButtonId';                                                    
    $('#'+buttonsDiv.id).prepend(startButton);                                              
    resetButton.id = 'resetButtonId';                                                    
    $('#'+buttonsDiv.id).append(resetButton);                                            
    saveButton.id = 'saveButtonId';                                                      
    $('#'+buttonsDiv.id).append(saveButton);    

and I get the following structure with this just above :

I have difficulties to insert ("opening" and "closing" tags) elements (like <div id="gui"></div>)

I have noticed that append() adds ("opening" and "closing") tags whereas prepend() just seems to add opening tag at the start : I don't know how to handle this difference.

How can I fix it and create the desired HTML structure?

Answer 1

Change:

$('#'+globalUiDiv.id).prepend(buttonsWrapperDiv);

to

$('#'+globalUiDiv.id).append(buttonsWrapperDiv);

The order is wrong because you appended the gui first, meaning that when you prependthe button div, it will become the first element, which means gui is pushed to the second row.

// Initialization of component objects        
  var popID = "mainWindow";

    webGlDiv = document.createElement('div');                                            
    webGlDiv.id = 'webgl';                                                               
    $('#'+popID).prepend(webGlDiv);                                                      
    globalUiDiv = document.createElement('div');                                         
    globalUiDiv.id = 'global-ui';                                                        
    $('#'+webGlDiv.id).prepend(globalUiDiv);                                             
    guiDiv = document.createElement('div');                                              
    guiDiv.id = 'gui';                                                                   
    $('#'+globalUiDiv.id).append(guiDiv);                                                
    buttonsWrapperDiv = document.createElement('div');                                   
    buttonsWrapperDiv.id = 'buttons-wrapper';                                            
    $('#'+globalUiDiv.id).append(buttonsWrapperDiv);                                    
    buttonsDiv = document.createElement('div');                                          
    buttonsDiv.id = 'buttons';                                                           
    $('#'+buttonsWrapperDiv.id).prepend(buttonsDiv);   
    
    startButton = document.createElement("button");
    startButton.id = 'startButtonId';                                                    
    $('#'+buttons.id).prepend(startButton);                               
    
    resetButton = document.createElement("button");
    resetButton.id = 'resetButtonId';                                                    
    $('#'+buttonsDiv.id).append(resetButton);                                      
    saveButton = document.createElement("button");
    saveButton.id = 'saveButtonId';                                                      
    $('#'+buttonsDiv.id).append(saveButton);
    
    console.log($('#'+popID)[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainWindow">
</div>

Answer 2

Different than other answers here is how I do things with Jquery. First I have a function to create dom elements.

(function ($) {

    $.fn.createAndAppend = function (type, attr, style) {
        var element = document.createElement(type);
        if (this != null)
            this.append(element);
        for (var i in attr) {
            element[i] = attr[i];
            //element.setAttribute(i, attr[i]);
        }
        for (var i in style) {
            element.style[i] = style[i];
        }
        return $(element);
    };

})(jQuery);

you can use it like:

var body = $("body");
var webgl = body.createAndAppend("div",{id:"webgl"});
var globalui = webgl.createAndAppend("div",{id:"global-ui"});

....

when you want to add buttons

var myButton = globalui.createAndAppend("button",{id:"myPrettyButton", innerHTML:"myButton", className:"myButtonClass"},{"width":"150px","height":"50px"})

As you can see, you can set inner html, class, id and any style you want. I like this way because I can do all the things in a single line.

Answer 3

Jquery was invented to make your life easier. But you continue to complicate it with native javascript)

$(document).ready(function() {
    var html = 
        '<div id="webgl">'+
          '<div id="global-ui">'+
            '<div id="gui"></div>'+
            '<div id="buttons-wrapper">'+
            '<div id="buttons">'+
            '<button type="button" id="startButtonId" class="btn btn-primary btn-xs" tabindex="13">Start</button>'+
            '<button type="button" id="resetButtonId" class="btn btn-default btn-xs" tabindex="14">Reset</button>'+
            '<button type="submit" id="saveButonId" class="btn btn-primary btn-xs">Save to file</button>'+
            '</div>'+
            '</div>'+
            '</div>'+
         '</div>';
    var popID = 'mainWindow';
    $('#'+popID).append(html);

});