<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><div> ???<input type="text" id="v"> ???<input type="button" id="add" value="添加"/> ???<input type="button" id="del" value="删除"/> ???<input type="button" id="clone" value="复制"/></div><ul id="u1"> ???<li>1</li> ???<li>2</li> ???<li>3</li></ul><script src="jquery-3.3.1.js"></script><script type="application/javascript"> ???$(‘#add‘).click(function () { ???????var v = $(‘#v‘).val(); ???????var temp = "<li>" + v + "</li>"; ???????$(‘#u1‘).append(temp); ???//内部尾部追加// ???????$(‘#u1‘).prepend(temp); ?//内部最前面插入// ???????$(‘#u1‘).after(temp); ?//外部后面加// ???????$(‘#u1‘).before(temp); ?//外部前面加 ???}); ???$(‘#del‘).click(function () { ???????var v = $(‘#v‘).val();// ???????$(‘#u1‘).children().eq(v-1).empty(); ?//清空标签内容 ???????$(‘#u1‘).children().eq(v-1).remove(); ??//删除标签 ???}); ???$(‘#clone‘).click(function () { ???????var v = $(‘#v‘).val(); ???????var temp = $(‘#u1‘).children().eq(v-1).clone(); ?//克隆标签 ???????$(‘#u1‘).append(temp); ???});</script></body></html>
jQuery文档操作
原文地址:https://www.cnblogs.com/alex-hrg/p/9538894.html