示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基于输入框的增删与复制</title>
</head>
<body>
<input type="text" id="te">
<input type="button" value="添加" id="add">
<input type="button" value="删除" id="del">
<input type="button" value="复制" id="copy">
<ul>
<li>秋风</li>
<li>萧瑟</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#add').click(function () {
var r = $('#te').val();
var temp = "<li>"+r+"</li>";
$('ul').prepend(temp);
// 直接追加字符串的方式原来就能添加子标签了呀
// append是追加为子元素的最后处,而prepend是追加为子元素的最前处
});
// 删除是通过索引来实现的
$('#del').click(function () {
var index = $('#te').val();
$('ul').children().eq(index).remove();
});
// 复制也是通过索引来实现的
$('#copy').click(function () {
var index = $('#te').val();
var co = $('ul>li').eq(index).clone();
// clone(),复制函数
$('ul').append(co);
});
</script>
</body>
</html>