练习：创建一个按钮，点击一次，则创建一个<input type="text"><input> 点击三次按钮，应该有三个输入框被创建出来。

来源：互联网发布：淘宝怎么返利编辑：程序博客网时间：2024/05/24 03:41

创建一个按钮，点击一次，则创建一个<input type="text"><input>

点击三次按钮，应该有三个输入框被创建出来。

主要思路：

1. 页面上有一个div

2. 每次点击按钮时，用jQuery根据id获得这个div，然后用jQuery的append方法在已有的div里面添加<input type="button"></input>

<html>

</html>

js方法一：

$(document).ready(function(){
$("#btn").on("click", function(){
$("#adiv").append($("<input type='text'></input>")) ;
});
});

</script>

js方法二：

$(document).ready(function(){
$("#btn").on("click", function(){
$("<input type='text'></input>").appendTo("#adiv");
});
});

</script>

js方法三：

$(document).ready(function(){
$("#btn").on("click", function(){
$("#adiv").append(function(){
return "<input type='text'></input>";
});
});
});

</script>

注：

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

相关文档：http://api.jquery.com/append/

http://www.w3school.com.cn/jquery/manipulation_append.asp

0 0