使用jQuery動態添加HTML元素不起作用

Question

我需要使用Javascript動態地構建按鈕菜單，但是我無法使其工作。 我使用Bootstrap作爲基礎樣式類。

這裏是我的代碼：

<div class="well"> 
    <button type="button" class="btn btn-primary btn-xs">Button 1</button> 
    <button type="button" class="btn btn-primary btn-xs">Button 2</button> 
    <button type="button" class="btn btn-primary btn-xs">Button 3</button> 
    <small class="pull-right">Right Text</small> 
</div> 


<div id="myMenu"> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     var upperWell = $("<div class='well clearfix'>"); 

     $('myMenu').append(upperWell); 

     var createButton = $("<button type='button' class='btn btn-primary btn-xs'>Button1</button>"); 

     var updateButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 2</button>"); 

     var exportButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 3</button>"); 

     $(upperWell).append(createButton); 
     $(upperWell).append(updateButton); 
     $(upperWell).append(exportButton); 

    }); 

</script> 

的HTML代碼是什麼，我需要使用Javascript來構建。

給定的Javascript代碼無法正常工作。

這裏是一個小提琴，顯示代碼：

JsFiddle

幫助非常appreaciated。謝謝。

Answer 1

您忘記了選擇器中的#。

應該是這個。 $('#myMenu').append(upperWell);

更新時間：http://jsfiddle.net/P7pTL/2/

Answer 2

嗨請看這裏http://jsfiddle.net/hz37q/

$(document).ready(function() { 

     var upperWell = $("<div class='well clearfix'>"); 

     $('#myMenu').append(upperWell); // <-- you miss hash 

     var createButton = $("<button type='button' class='btn btn-primary btn-xs'>Button1</button>"); 

     var updateButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 2</button>"); 

     var exportButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 3</button>"); 

     $(upperWell).append(createButton); 
     $(upperWell).append(updateButton); 
     $(upperWell).append(exportButton); 

    });