JQuery:附加到在另一个函数中创建的元素 [英] JQuery: Appending to an element created in another function
本文介绍了JQuery:附加到在另一个函数中创建的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我像这样创建了一个 div:
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");
但它没有做任何事情.div 仍然存在，但它是空的.如果我将代码更改为
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>
推荐答案
您的 add() 函数在 $(document).ready(); 之前被调用；
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>
可以浓缩为:
<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屋！
查看全文
