gpt4 book ai didi

javascript - 使用 append() 动态添加一个 div

转载 作者:行者123 更新时间:2023-11-28 04:38:15 26 4
gpt4 key购买 nike

请通知我我是否解释得好。我正在使用 .append() 在页面内重复一个 div。

HTML

 <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>

<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>

当我重复添加一个 div 时,这很有效。但我喜欢像下面的代码那样在外部调用它。

 <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>

<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>

为什么这不起作用?

最佳答案

尝试使用clone():

 <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>

<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>​

您必须在添加之前创建一个新元素。

Demo

关于javascript - 使用 append() 动态添加一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13656546/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com