JQuery: Appending to an element created in another function_问答_开发者

JQuery: Appending to an element created in another function

开发者 https://www.devze.com 2022-12-19 16:36 出处：网络

I created a div like so: $(document).ready(function() { $(document.createElement(\"div\")).attr(\"id\", \"container\").appendTo(\"body\");

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>

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>