Dynamically appending HTML elements using jQuery not working

Question

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.

dev · Accepted Answer · 2014-06-27 23:11:19Z

2

You have forgotten the # from the selector.

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

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

answered Jun 27, 2014 at 23:11

dev

4,0093 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sylwester · Accepted Answer · 2014-06-27 23:11:40Z

0

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

    });

answered Jun 27, 2014 at 23:11

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Collectives™ on Stack Overflow

Dynamically appending HTML elements using jQuery not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related