Jquery append div to new div

Question

I have to append 2 div to new div:

<script type="text/javascript">
        $(function() {
            $( "#table-filter_wrapper" ).append($( "<div class='main_tbl_btm_info'></div>" ));
            $( "#table-filter_info" ).appendTo( $( ".main_tbl_btm_info" ));
            $( "#table-filter_paginate" ).appendTo( $( ".main_tbl_btm_info" ));
        });
</script>

The problem is that it can't find table-filter_wrapper at ready.
When I use alert before append then it works.
How can I get that table-filter_wrapper is loaded or not.

Do you know when #table-filter_wrapper is injected into the DOM? — David Hellsing
– David Hellsing, Commented Oct 29, 2013 at 9:17
@David table-filter_wrapper is loaded at the ready and it take time so when code run it could not find table-filter_wrapper if we give some delay like by alert or other then it works .So actual problem is find table-filter_wrapper is loaded or not after load execute the code. — Prince
– Prince, Commented Oct 29, 2013 at 9:46
How are you "loading" the #table-filter_wrapper? At some point, you must be using append or similar, so just place this code after the append has been made. — David Hellsing
– David Hellsing, Commented Oct 29, 2013 at 9:49
@David #table-filter_wrapper is created by datatable for pagination and it is loaded on ready and I am using append after init the datatable — Prince
– Prince, Commented Oct 29, 2013 at 9:51
possible duplicate of Create <div> and append <div> dynamically — Prince
– Prince, Commented Feb 3, 2015 at 6:12

mamdouh alramadan · Accepted Answer · 2013-10-29 09:09:46Z

3

you need to delete $ from your append like this:

<script type="text/javascript">
        $(function() {
            $( "#table-filter_wrapper" ).append( "<div class='main_tbl_btm_info'></div>");
            $( "#table-filter_info" ).appendTo(".main_tbl_btm_info" );
            $( "#table-filter_paginate" ).appendTo( ".main_tbl_btm_info");
        });
</script>

answered Oct 29, 2013 at 9:09

mamdouh alramadan

8,5166 gold badges39 silver badges53 bronze badges

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

7 Comments

David Hellsing Over a year ago

This doesn’t make sense... appendTo can take a jQuery array as argument, so this wouldn’t solve anything.

Bhojendra Rauniyar Over a year ago

but the div is not array in op question.

David Hellsing Over a year ago

@mamdouhalramadan yea, the script can’t find table-filter_wrapper at ready, which would have nothing to do with your solution.

Arun P Johny Over a year ago

@mamdouhalramadan I don't think that is the problem, $( "<div class='main_tbl_btm_info'></div>" ) creates a new dom element and it will be accepted by jQuery

mamdouh alramadan Over a year ago

yes from david fiddle I saw it's working and it does make sense, but it doesn't mean that this is right to be done with elements already declared or being passed from other sources.

|

David Hellsing · Accepted Answer · 2013-10-29 09:20:08Z

2

Your code works if the elements are available in the DOM: http://jsfiddle.net/XY7Sf/

<div id="table-filter_wrapper"></div>
<div id="table-filter_info"></div>
<div id="table-filter_paginate"></div>

If they are not available in the DOM, you need to run this code when they are, maybe in an ajax callback somewhere?

answered Oct 29, 2013 at 9:20

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Comments

Ricky Stam · Accepted Answer · 2013-10-29 09:11:13Z

1

Try to target a wrapper div first or table and the use .find() to get the class you want to appentTo like:

var a = $(".wrapper").find(".main_tbl_btm_info")
$( "#table-filter_paginate" ).appendTo(a);

answered Oct 29, 2013 at 9:11

Ricky Stam

2,12621 silver badges25 bronze badges

Comments

Rahul Gupta · Accepted Answer · 2013-10-29 09:16:37Z

1

You want something like this, right ?

Demo JSFIDDLE

JS:

$(function() {
            $( "#table-filter_wrapper" ).append($( "<div class='main_tbl_btm_info'>main_tbl_btm_info</div>" ));

    $( ".main_tbl_btm_info" ).append($( "<div id='table-filter_info'>table-filter_info</div>" ));

    $( ".main_tbl_btm_info" ).append($( "<div id='table-filter_paginate'>table-filter_paginate</div>" ));

});

answered Oct 29, 2013 at 9:16

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Collectives™ on Stack Overflow

Jquery append div to new div

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related