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>