JQuery: Appending to an element created in another function

Question

I created a div like so:

 $(document).ready(function() {
        $(document.createElement("div")).attr("id", "container").appendTo("body");
    });

and then later, dynamically I want to append some stuff to it, so in another function I call

$(newElement).appendTo("#container");

but it doesn't do anything. The div is still there, but it is empty. If I change the code to

$(newElement).appendTo("body");

it works fine. Any ideas on what I'm doing wrong?

Here is a full example of my code:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(document.createElement("div")).attr("id", "container").appendTo("body");
            });

            function add() {
                var newElement = $(document.createElement("div")).attr("id", "inner");
                $(newElement).appendTo("#container");
            }
        </script>
        <style type="text/css">
            #inner{
                background-color: black;
                height: 200px;
                width:100px;
            }
        </style>
    </head>
    <body>       
        <script language="JavaScript" type="TEXT/JAVASCRIPT">
            add();
        </script>
    </body>
</html>

need more information perhaps... can we see your sample page? — nil
– nil, Commented Feb 4, 2010 at 4:30
This code looks fine. There might be some other error occurring somewhere else. — rahul
– rahul, Commented Feb 4, 2010 at 4:30
$(document.createElement("div")).attr("id", "container") can simply be written as $('<div id="container"></div>') — Chetan S
– Chetan S, Commented Feb 4, 2010 at 4:33
@Chetan: at least in jQuery 1.4, $("<div>").attr("id", "container") is better and faster because it calls document.createElement() rather than writing and parsing HTML, which is more expensive. — cletus
– cletus, Commented Feb 4, 2010 at 4:38
@Ryan: you may be having issues with browser caching of your Javascript, which is another reason to use static content versioning. — cletus
– cletus, Commented Feb 4, 2010 at 4:45

jessegavin · Accepted Answer · 2010-02-04 05:14:32Z

2

Your add() function is being called before $(document).ready();

Change it to this and it should work:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(document.createElement("div")).attr("id", "container").appendTo("body");
                add();
            });

            function add() {
                var newElement = $(document.createElement("div")).attr("id", "inner");
                $(newElement).appendTo("#container");
            }
        </script>
        <style type="text/css">
            #inner{
                background-color: black;
                height: 200px;
                width:100px;
            }
        </style>
    </head>
    <body>       
    </body>
</html>

Which could be condensed to:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(function() {
                $("<div/>", { id : "container" }).appendTo("body");
                $("<div/>", { id : "inner"}).appendTo("#container");
            });
        </script>
        <style type="text/css">
            #inner{
                background-color: black;
                height: 200px;
                width:100px;
            }
        </style>
    </head>
    <body>       
    </body>
</html>

edited Feb 4, 2010 at 5:14

answered Feb 4, 2010 at 5:07

jessegavin

75.8k28 gold badges141 silver badges165 bronze badges

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

1 Comment

Ryan Elkins Over a year ago

I see what you're saying. In reality add gets called at various points dynamically, which should work. My simplified example (which I was also using to test out various css and layout issues) is causing the problem. I guess I was under the impression that $(document).ready(); was called before it rendered the page or something. Adding <INPUT TYPE="button" VALUE="Press This" onClick="add()"> has the function working just fine on click.

Collectives™ on Stack Overflow

JQuery: Appending to an element created in another function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related