CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Mendes
Mendes

Reputation: 18441

Dynamically appending HTML elements using jQuery not working

I need to build a button menu dynamically using Javascript, but I cannot make it work. I´m using Bootstrap as base style class.

Here is my code:

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

The HTML code is what I need to build using Javascript.

The given Javascript code is not working.

Here is a fiddle that shows the code:

JsFiddle

Help very much appreaciated. Thanks.

Upvotes: 0

Views: 58

Answers (2)

sylwester
sylwester

Reputation: 16498

Hi Please see here 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);

    });

Upvotes: 0

dev
dev

Reputation: 3999

You have forgotten the # from the selector.

Should be this. $('#myMenu').append(upperWell);

Updated: http://jsfiddle.net/P7pTL/2/

Upvotes: 2

Related Questions