使用前置和追加动态创建DOM结构

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.

Could you help me please to fix it and create the HTML structure wanted at the beginning of my question ?

Thanks for your help

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 prepend the 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

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

});

Answer 3

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.