Js动态生成Div、带属性。append()和appendChild()

在我们设计前端界面的时候，根据不同用户就需要对应得有不一样的界面实现个性化展示。有的模块就需要根据返回字段进行动态生成。

• 主要常见的就是append、appendChild。开始还在纠结两个方法有啥区别、专门去了解了一下，其实归根到底两个所能实现功能是一样的。
  二者区别：
• append是jQuery里面的方法。可以直接接收String拼接。当然前提是需要引入jQuery。
• appendChild是js原生的方法，只能接收节点。例如本文所写事先createElement创建的div。需要添加子模块的父div
  

---

直接上代码：

			//获取需要动态生成div的父div
            var banners = document.getElementById("banners");
          
            for(var i=0; i<vm.bannerList.length; i++){
                //创建一个div
                var div = document.createElement("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.bannerList[i].imageUrl+ '" class="responsive-image" alt="img"> ';
                banners.appendChild(div);
             }

可以看到已经在banners里面自动生成两个子div了！

---

主要功能是根据从后台获取过来的参数列表、生成对应的div进行数据展示。

简单记录。一只不务正业的Java码畜。如有错误、望指正！谢谢