原先的div
<div class="wrapper-title"> 选择下一节点处理人 <label class="wrapper_finish">完成</label></div>
<div class="mui-scroll-wrapper">
<div class="scoll_box" id="scoll_box"></div>
<div class="mui-scroll">
<ul class="mui-table-view" id="mui-table-view">
<li class="mui-table-view-cell" id="selNode" value="1111"><a href="javascript:changeNode()">显示的内容</a></li>
</ul>
</div>
</div>
js对div的操作
function changeGroup(){
var content = $("#mui-table-view").children("li");//获得id为mui-table-vie的ul的下面的li
//获取value属性的值
var value = content[nodeIndex].getAttribute("value");
//清空id为scoll_box的div
document.getElementById("scoll_box").innerHTML = "";
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var groups = eval(xmlHttp.responseText);
for (var i = 0; i < groups.length; i++) {
oOption = document.createElement("OPTION");
oOption.text = groups[i].substring(groups[i].lastIndexOf("/") + 1);
oOption.value = groups[i];
//新增一个div
var newchild = document.createElement("div");
//设置新增的div的class属性
newchild.className = "box-tag";
//设置新增的div的内容
newchild.innerHTML = "<span class=\"box-tag1\"><a href=\"javascript:addUser()\">"+oOption.text+"</a></span>" ;
//追加,不是覆盖原来的div内容
document.getElementById("scoll_box").appendChild(newchild);
}
xmlHttp = null;
}
}
xmlHttp.open("POST","work_seluser_data.jsp?type=role&id=all",true);
xmlHttp.send(null);
}
其他操作
$("#mui-table-view").find("li").remove();//清空右边的li
var s=document.getElementById("mui-table-view");
var li= document.createElement("li");//新增一个li
li.className="mui-table-view-cell" ;//设置新增的li的class属性
oOption = document.createElement("OPTION");
oOption.text = groups[i].substring(groups[i].lastIndexOf("/") + 1);
oOption.value = groups[i];
li.setAttribute("value", oOption.text);//设置新增的li的value属性
li.innerHTML = "<a href=\"javascript:changeGroup("+ i +");\">"+oOption.text+"</a>";//设置新增的li的显示的内容
s.insertBefore(li,s.childNodes[i]);//将li追加的ul中
document.getElementById("scoll_box").innerHTML = "";//清空id为scoll_box的div