jquery范例(动态操作dom元素)
jquery实例(动态操作dom元素)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>jquery 动态添加删除移动dom元素</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var fieldMax = 5; $("input#add").click(function(){ if($('div.field').size() < fieldMax) { addField(this); }else{ alert("达到最大字段数,请先删除再添加!"); } }); }); function addField(obj) { $('div#fields').append( '<div class="field">' + '字段名称:'+ '<input type="text" name="fieldTitle" /> ' + '<input type="button" class="up" value="上移" onclick="up(this);"/>'+ '<input type="button" class="down" value="下移" onclick="down(this);"/>'+ '<input type="button" class="delete" value="delete" />'+ '</div>') .find("input.delete").click(function(){ $(this).parent().remove(); }); } function up(obj){ $(obj).parent().prev().before($(obj).parent()); } function down(obj){ $(obj).parent().next().after($(obj).parent()); } </script> </head> <body> <div id="fields"> <div class="field"> 字段名称: <input type="text" name="fieldTitle"> <input type="button" class="up" value="上移" onclick="up(this);"/> <input type="button" class="down" value="下移" onclick="down(this);"/> <input type="button" class="delete" value="delete"/> </div> </div> <input type="button" value="添加字段" id="add"> </body> </html>