<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="t1" placeholder="请输入添加的内容">
<input type="button" id="t2" value="添加">
<input type="button" id="t3" value="复制">
<input type="button" id="t4" value="删除">
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
//添加
$('#t2').click(function () {
var text = $('#t1').val();
var temp = '<li>'+ text +'</li>';
$('#ul1').append(temp);
})
//复制
$('#t3').click(function () {
var index1 = ($('#t1').val());
var v = $('li').eq(parseInt(index1)-1).clone();
// console.log($('li').length);
$('#ul1').append(v);
if (index1>$('li').length){
alert('请输入的序号为1-'+ $('li').length);
}
})
//删除
$('#t4').click(function () {
var index1 = ($('#t1').val());
var v = $('li').eq(parseInt(index1)-1).remove();
if ($('li').length == 0){
alert('列表已经删除完毕!')
}
if (index1>$('li').length){
alert('请输入的序号为1-'+ $('li').length);
}
})
</script>
</body>
</html>
jquery内容操作-增删改
最新推荐文章于 2023-03-02 20:15:58 发布