关于js中动态创建对象的_js 根据列表长度构造对象-CSDN博客

本文链接：https://blog.csdn.net/Icanflyzx/article/details/54648097

在一些招聘网站中我们常看到一些，数据选择，匹配信息，选择对应的数据然后进行筛选需要的信息。

在js中为了达到数据筛选的目的，并且优化数据我们需要用到动态创建的方法。

利用父节点，对子节点进行动态的添加删除。

今天做了一个基础的数据筛选实例，主要是地区，工种，工资，要求在动态添加到li中，且保证数据的位置不变。

需要灵活的应用：

oUl.removeChild(aLi1[i]); //oUl为父节点,移除在oUl中的aLi1[i]元素
oUl.insertBefore(oLi,oUl.children[location]); //在oUl父节点中，第location个子节点前插入，oLi
oUl.appendChild(oLi); //添加子节点oLi

具体的算法思路是：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
li{list-style:none;position:relative;left:30px;top:10px;margin:3px;}
#ul1 li{ float:left; }
</style>
<title>选择筛选</title>
<script src="ku.js"></script>
<script>
window.onload = function(){
aUl = document.getElementsByTagName('ul');
oUl = document.getElementById('ul1');

aLi = aUl[0].getElementsByTagName('li');//将地区的li封装在aLi标签中
aLizw = aUl[1].getElementsByTagName('li');//将职位的li封装在aLizw标签中，方便对数据操作时分类处理
aLigz = aUl[2].getElementsByTagName('li');//将工资li标签封装在aLigz标签中，

addli(aLi,'we',0);
addli(aLizw,'w',1);
addli(aLigz,'h',2);

function addli(obj,tagname,location){
for(var i = 0; i<obj.length;i++){
obj[i].onclick = function(){
var aLi1 = oUl.getElementsByTagName('li');
//判断添加的地址li中是否已经添加如果添加了，删除掉原来的地址
//添加新的地址
for(var i=0;i<aLi1.length;i++){
if( aLi1[i].className == tagname){
oUl.removeChild(aLi1[i]);//给同类的标签添加相同的class名称，方便进行数据处理
//这样实现了删除原有的地址li，然后在添加新的li
}
}
//动态创建li的过程
var oLi = document.createElement('li');

oLi.innerHTML = this.innerHTML;//将选中的值放入li中
addClass(oLi,tagname);//

if( oUl.children[0] ){
oUl.insertBefore(oLi,oUl.children[location]);//如果有元素的话，在相应位置上插入对应的数组
}else{
oUl.appendChild(oLi);//如果一个元素都没有直接插入元素即可
}

}
}
}

}
</script>
</head>
<body>
<ul>地区
<li>九江</li><li>瑞昌</li><li>南昌</li>
</ul>
<ul>职位
<li>网页制作</li><li>java攻城师</li><li>美工美化</li>
</ul>
<ul>工资
<li>5000</li><li>4000</li><li>8000</li>
</ul>
<ul id="ul1" class="box1 box" >

</ul>
</body>
</html>