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

本文介绍了JQuery的：追加到另一个函数创建一个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建一个div像这样：

  $（文件）。就绪（函数（）{
        $（使用document.createElement（格））ATTR（ID，容器）appendTo（身体）。
    }）;

再后来，动态我想一些东西附加到它，所以在另一个函数我称之为

  $（为newElement）.appendTo（＃集装箱）;

但它不会做任何事情。在div仍然存在，但它是空的。如果我改变code到

  $（为newElement）.appendTo（身体）;

它工作正常。在我做错了任何想法？

下面是我的code的完整的例子：

 ＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
    ＆LT; HEAD＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-latest.pack.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本类型=文/ JavaScript的＆GT;
            $（文件）。就绪（函数（）{
                $（使用document.createElement（格））ATTR（ID，容器）appendTo（身体）。
            }）;            函数add（）{
                。VAR为newElement = $（使用document.createElement（格））ATTR（ID，内部）;
                $（为newElement）.appendTo（＃集装箱）;
            }
        ＆LT; / SCRIPT＆GT;
        ＆LT;风格类型=文/ CSS＆GT;
            ＃内{
                背景色：黑色;
                高度：200像素;
                宽度：100像素;
            }
        ＆LT; /风格＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
        ＆LT; SCRIPT LANGUAGE =JavaScript的TYPE =TEXT / JAVASCRIPT＆GT;
            加（）;
        ＆LT; / SCRIPT＆GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

您add（）函数被之前的$（document）呼吁。就绪（）;

改成这样，它应该工作：

 ＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
    ＆LT; HEAD＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-latest.pack.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本类型=文/ JavaScript的＆GT;
            $（文件）。就绪（函数（）{
                $（使用document.createElement（格））ATTR（ID，容器）appendTo（身体）。
                加（）;
            }）;            函数add（）{
                。VAR为newElement = $（使用document.createElement（格））ATTR（ID，内部）;
                $（为newElement）.appendTo（＃集装箱）;
            }
        ＆LT; / SCRIPT＆GT;
        ＆LT;风格类型=文/ CSS＆GT;
            ＃内{
                背景色：黑色;
                高度：200像素;
                宽度：100像素;
            }
        ＆LT; /风格＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;

哪些可缩合以

 ＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
    ＆LT; HEAD＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-latest.pack.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本类型=文/ JavaScript的＆GT;
            $（函数（）{
                $（＆LT; DIV /＆gt;中，{ID：集装箱}）。appendTo（身体）;
                $（＆LT; DIV /＆gt;中，{ID：内部}）。appendTo（＃集装箱）;
            }）;
        ＆LT; / SCRIPT＆GT;
        ＆LT;风格类型=文/ CSS＆GT;
            ＃内{
                背景色：黑色;
                高度：200像素;
                宽度：100像素;
            }
        ＆LT; /风格＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;

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>

这篇关于JQuery的：追加到另一个函数创建一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

jQuery的

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

问题描述