ansaurus

Question

JQuery: Appending to an element created in another function

Answer 1

+2 A:

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"&gt;
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;
        <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"&gt;
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;
        <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>

jessegavin 2010-02-04 05:07:30

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.

Ryan Elkins 2010-02-04 05:41:57

ansaurus

tags:

views:

answers:

JQuery: Appending to an element created in another function

related questions