DIV动态创设与删除

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的唯一性.其实不减也可以.