javascript - 通过前置和附加创建动态 DOM 结构

Question

我想动态创建(使用 jQuery)以下结构:

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

这是我所做的(使用 popID = 'mainWindow' 并且 HTML 代码已经包含“<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);    

我在上面得到了以下结构:

我很难插入(“开始”和“结束”标签)元素(例如 <div id="gui"></div> )

我注意到append()添加(“开始”和“结束”)标签，而 prepend()似乎只是在开头添加开始标记:我不知道如何处理这种差异。

如何修复它并创建所需的 HTML 结构？

Answer 1

更改:

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

至

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

顺序是错误的，因为您首先附加了 gui，这意味着当您前置按钮 div 时，它将成为第一个元素，这意味着 gui 被推送到第二行。

// 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>