jquery动态添加Div

http://blog.csdn.net/xiaoguang44/article/details/6895101

实现效果：动态添加一行控件



html页面中的代码

[html] view plaincopy

    <div id="filterDiv">  
               <div id="div1">  
                    <input id="inputPropertyName1" value="MetricName" />  
                    <input id="inputOperation1" value="contains" />  
                    <input id="filterValue1" />  
               </div>      
          </div>  
            <button id="filter">Filter</button>  
            <button id="add">Add</button>  
            <button id="reset">Reset</button>  


jqury代码

[javascript] view plaincopy

    $("#filter").click(function () {  
                    for (var i = 1; i <= filterNum; i++) {  
                        if ($("#filterValue" + i).val() == null || $("#filterValue" + i).val() == "") {  
                            alert($("#filterValue" + i).val());  
                            continue;  
                        }  
                        else {  
                            if ($("#inputPropertyName" + i).val() == "MetricId") {  
                                dataSource.filter({  
                                    field: $("#inputPropertyName" + i).val(),  
                                    operator: $("#inputOperation" + i).val(),  
                                    value: parseInt($("#filterValue" + i).val())  
                                });  
                            }  
                            else {  
                                dataSource.filter({  
                                    field: $("#inputPropertyName" + i).val(),  
                                    operator: $("#inputOperation" + i).val(),  
                                    value: $("#filterValue" + i).val()  
                                });  
                            }  
                        }  
                    }  
      
                });  
      
      
                $("#add").click(function () {  
                    filterNum++;  
                    var newDiv = document.createElement('div');  
                    var str = "<input id='inputPropertyName" + filterNum + "' value='MetricName' /><input id='inputOperation" + filterNum + "' value='contains' /><input id='filterValue" + filterNum + "' /><input id='delItem'" + filterNum + " onclick='delItem(" + filterNum + ");' value='删除此项' type='button' />";  
                    newDiv.innerHTML = str;  
                    newDiv.setAttribute("Id", "div" + filterNum);  
                    $("#filterDiv").append(newDiv);  
                });  
      
      
                $("#reset").click(function () {  
                    dataSource.filter({  
                        field: "MetricName",  
                        operator: "contains",  
                        value: ""  
                    });  
                });  


删除的jquery

[javascript] view plaincopy

    function delItem(i) {  
                   $("#div" + i).remove();  
               }