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, Oct 29 '13 at 09: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, Oct 29 '13 at 09: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, Oct 29 '13 at 09: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, Oct 29 '13 at 09:51
possible duplicate of [Create
and append
dynamically](http://stackoverflow.com/questions/14004117/create-div-and-append-div-dynamically) — Prince, Feb 03 '15 at 06:12

score 3 · Answer 1 · answered Oct 29 '13 at 09:09

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 '13 at 09:09

mamdouh alramadan

8,349
6
36
53

2

This doesn’t make sense... `appendTo` can take a jQuery array as argument, so this wouldn’t solve anything. – David Hellsing Oct 29 '13 at 09:15
but the div is not array in op question. – Bhojendra Rauniyar Oct 29 '13 at 09:17
@mamdouhalramadan yea, the script can’t find `table-filter_wrapper` at ready, which would have nothing to do with your solution. – David Hellsing Oct 29 '13 at 09:21
@mamdouhalramadan I don't think that is the problem, `$( "
" )` creates a new dom element and it will be accepted by jQuery – Arun P Johny Oct 29 '13 at 09:21
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. – mamdouh alramadan Oct 29 '13 at 09:25
@all my actual problem is table-filter_wrapper take time to load if we add an alert before append it take time and my code is working good but if we remove alert then it could not find table-filter_wrapper so i want to know when table-filter_wrapper is loaded. – Prince Oct 29 '13 at 09:33
@Prince - then check [this](http://stackoverflow.com/questions/4592493/check-if-element-exists-in-jquery) – mamdouh alramadan Oct 29 '13 at 10:00

score 2 · Answer 2 · answered Oct 29 '13 at 09:20

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?

score 1 · Answer 3 · answered Oct 29 '13 at 09:11

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 '13 at 09:11

Ricky Stam

2,116
21
25

score 1 · Answer 4 · answered Oct 29 '13 at 09:16

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

});

Jquery append div to new div

4 Answers4