js怎么把几个li标签按顺序添加进一个div中？

朴灿烈づ我的快乐病毒、 2021-06-24 15:58 503阅读 0赞

1.js怎么把几个li标签按顺序添加进一个div中？

`这种问题一般出现在前端请求数据之后，后端以数组的形式返回给前端，然后前端对这些数组进行处理。`

`（1）首先是对后端返回的数据进行拆分，分别得到你想要得到的数据，就比如后台返回数据的id，name，type，status等；`

`即可令：`

var datas = response.data;//这是对后台数据的处理
    var length = datas.length;

（2）然后开始遍历后端返回的数组里数据；

for(i=0;i<length;i++){
 var data = datas[i];
 var id = data.id;
 var name = data.name;
 var type = data.type;
 var status = data.status;
 }

如果返回的status还分了类，那么你就要对其各种分类进行不同的判断，比如：

if(status == "0"){
        //codes go here
    }else if(status == "1"){
        //codes go here
    }else{
        //codes go here
    }

具体情况按照项目的需求来即可；

（3）再然后给每个需要添加的li标签赋一个id，使其唯一，id值的大小是变化的，可以先令第一个li标签的id=1，后面递增；

var list_str = '<li id=""' + id + 'class="list_li">' + li_content + '</li>';

（4）最后直接把定义得到的li添加到指定的ul中就ok了；

$("ul").append(list_str);

（5）这样就把后台返回的数据添加到指定的div中或者ul中了。

（6）但是有时候我们需要把所有后端返回的数据全部用上，意思是后端返回的第一个数组里的数据要全部用于id=1的li标签里，不能用于其他的li标签中。那么可以在定义的li标签中可以添加所有数据在li里，可以这样写：

var list_str = '<li id=""' + id + 'class="list_li">' + li_content + '' + name + '' + '' + type + '' + '' + status + '' + '</li>';

这样就把每一个数组里的数据都写在了对应的li标签里了，到时候可直接调用，最方便的是，里面的id,name,type,status都是动态的，也就是变化的，根本无需另外处理，可以直接调用，但是这里值得注意的是，因为页面最后呈现的只有li标签里的content的内容，不包含其他的内容，即name,type,status。那么怎么对另外三个数据进行处理呢？

（7）很简单，这样不是在li标签中设置了class名吗？只需要在css文件里将对应的class名里面写下display: none;就欧克了！也就是隐藏它们就好了，但是对值得调用并不影响；

（8）主要的技术点已经介绍完毕，至于其他的相关处理，只需要在对应的位置写下处理代码就可以了。