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>

我需要使用Javascript构建HTML代码。

给定的Javascript代码无效。

这是一个显示代码的小提琴：

JsFiddle

非常有帮助。感谢。

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

    });

使用jQuery动态附加HTML元素无法正常工作

2 个答案: