JQuery的：追加到另一个函数创建一个元素 [英] JQuery: Appending to an element created in another function
本文介绍了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的：追加到另一个函数创建一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
