DIV动态创建与删除

JS添加方法:

function copySelectInfo(v){
 var copyInfoHtml ='<div id="newDiv'+v+'">逻辑关系:';
 copyInfoHtml +='<select name="whereGuanXi">'  ;
 copyInfoHtml +='<option value=" AND ">与(AND)</option>';
 copyInfoHtml +='<option value=" OR ">或(OR)</option>';
 copyInfoHtml +='</select><br>';
 copyInfoHtml += document.getElementById("whereSelect").outerHTML;
 copyInfoHtml +='&nbsp;关系&nbsp;';                                                   
 copyInfoHtml +='<select name="guanXi">'  ;                               
 copyInfoHtml +='<option value=" > ">大于(>)</option>';                        
 copyInfoHtml +='<option value=" < ">小于(<)</option>';                        
 copyInfoHtml +='<option value=" => ">大于等于(=>)</option>';                   
 copyInfoHtml +='<option value=" <= ">小于等于(<=)</option>';                   
 copyInfoHtml +='<option value=" = ">等于(=)</option>';                        
 copyInfoHtml +='<option value=" LIKE ">模糊(LIKE)</option>';                     
 copyInfoHtml +='</select>';                                              
 copyInfoHtml +='&nbsp;值:<input type="text" name="whereValue" style="width:20%"/></div>';

// 将页面对象输出HTML

 var myDivOutHtml = document.getElementById("myDivHtml").outerHTML;

// 将输出的HTML追加到指定的层中
 document.getElementById("myDivHtml").innerHTML = myDivOutHtml + copyInfoHtml;
}

// 新增DIV层并给其ID命名
function addDiv(){
 document.getElementById("myDivCount").value = (document.getElementById("myDivCount").value*1) +1;
 var v = document.getElementById("myDivCount").value;
 copySelectInfo(v);
}

// 移除DIV
function removeDiv(){
 var v = document.getElementById("myDivCount").value;
 if(v > 0){
  var id = "newDiv"+v;
  var div = document.getElementById(id);
  div.removeNode(true);
  document.getElementById("myDivCount").value = (document.getElementById("myDivCount").value*1) -1;
 } else {
  alert("至少要保留一个条件");
 }
}

 

先调用:addDiv()方法.

原理:其实很简单因项目中有此需求只能这样充数了,每调用一次addDiv方法,会去读一个text 的value值,并用这个值追加div ID的名字的后边,为确定div ID唯一性.并把text 的值在加 1 .删除方法也很简单直接移动当前div 即可了.removeDiv方法也是在调用的时候读取text 的值(就算是共享变量吧)调用完之后在 -1.这样就能确定添加和移动的时候的ID的唯一性.其实不减也可以.