Js动态⽣成Div、带属性。append（）和appendChild（）
在我们设计前端界⾯的时候，根据不同⽤户就需要对应得有不⼀样的界⾯实现个性化展⽰。有的模块就需要根据返回字段进⾏动态⽣成。
主要常见的就是append、appendChild。开始还在纠结两个⽅法有啥区别、专门去了解了⼀下，其实归根到底两个所能实现功能是⼀样的。
⼆者区别：
append是jQuery⾥⾯的⽅法。可以直接接收String拼接。当然前提是需要引⼊jQuery。
appendChild是js原⽣的⽅法，只能接收节点。例如本⽂所写事先createElement创建的div。需要添加⼦模块的⽗div
直接上代码：
//获取需要动态⽣成div的⽗div原生js和js的区别
var banners = ElementById("banners");
for(var i=0; i<vm.bannerList.length; i++){
//创建⼀个div
var div = ateElement("div");
//设置div的id
div.id = "slide_show_"+i;
//设置div的class
//div.className = "class1";
//设置style
//div.style.display="block";
//设置⼦div的其他属性，直接通过字符串连接的⽅式连接即可。动态值放在引号外⾯就⾏
div.innerHTML = '<div class="overlay"></div><div class="homepage-slider-caption"><h3>'+vm.bannerList[i].title+'</h3></div><img  src="' +vm.ba nnerList[i].imageUrl+ '" class="responsive-image" alt="img"> ';
banners.appendChild(div);
}
可以看到已经在banners⾥⾯⾃动⽣成两个⼦div了！
主要功能是根据从后台获取过来的参数列表、⽣成对应的div进⾏数据展⽰。
简单记录。⼀只不务正业的Java码畜。如有错误、望指正！谢谢

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。