Javascript 使用prepend和append动态创建DOM结构

我希望（使用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> 

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

我很难插入（“开始”和“结束”标记）元素（如

）

我注意到

append（）

添加了（“开始”和“结束”）标记，而

prepend（）

似乎只是在开始时添加了开始标记：我不知道如何处理这种差异

你能帮我修复它并创建我问题开头所需的HTML结构吗

---

感谢您的帮助

Jquery是为了让您的生活更轻松而发明的。但您继续使用本机javascript使其复杂化）

$（文档）.ready（函数（）{
变量html=
''+
''+
''+
''+
''+
“开始”+
“重置”+
“保存到文件”+
''+
''+
''+
'';
var popID='mainfown'；
$（'#'+popID）.append（html）；
});

Jquery的发明是为了让你的生活更轻松。但您继续使用本机javascript使其复杂化）

$（文档）.ready（函数（）{
变量html=
''+
''+
''+
''+
''+
“开始”+
“重置”+
“保存到文件”+
''+
''+
''+
'';
var popID='mainfown'；
$（'#'+popID）.append（html）；
});

更改：

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

到

顺序是错误的，因为您首先附加了

gui

，这意味着当您

prepend

按钮div时，它将成为第一个元素，这意味着gui被推到第二行

//组件对象的初始化
var popID=“主窗口”；
webGlDiv=document.createElement（'div'）；
webGlDiv.id='webgl'；
$（'#'+popID）.prepend（webGlDiv）；
globalUiDiv=document.createElement（'div'）；
globalUiDiv.id='全局用户界面'；
$（'#'+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（“按钮”）；
startButton.id='startButtonId'；
$（“#”+buttons.id）.prepend（开始按钮）；
resetButton=document.createElement（“按钮”）；
resetButton.id='resetButtonId'；
$（'#'+buttonsDiv.id）.append（resetButton）；
saveButton=document.createElement（“按钮”）；
saveButton.id='saveButtonId'；
$（'#'+buttonsDiv.id）.append（saveButton）；
log（$（'#'+popID）[0].outerHTML）

更改：

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

到

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


//组件对象的初始化
var popID=“主窗口”；
webGlDiv=document.createElement（'div'）；
webGlDiv.id='webgl'；
$（'#'+popID）.prepend（webGlDiv）；
globalUiDiv=document.createElement（'div'）；
globalUiDiv.id='全局用户界面'；
$（'#'+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（“按钮”）；
startButton.id='startButtonId'；
$（“#”+buttons.id）.prepend（开始按钮）；
resetButton=document.createElement（“按钮”）；
resetButton.id='resetButtonId'；
$（'#'+buttonsDiv.id）.append（resetButton）；
保存按钮=文档
$('#'+globalUiDiv.id).prepend(buttonsWrapperDiv);

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

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

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

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