Question

我创建了一个像这样的div：

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

然后，动态我想要附加一些东西，所以在另一个函数中我调用

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

但它没有做任何事情。 div仍在那里，但它是空的。如果我将代码更改为

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

它工作正常。关于我做错了什么想法？

以下是我的代码的完整示例：

<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>

Answer 1

在$（document）.ready（）之前调用你的add（）函数;

将其更改为此应该可以正常工作：

<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>

可以简化为：

<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>

JQuery：追加到另一个函数中创建的元素

1 个答案: