JavaScript节点实现动态地添加元素及样式

基于javascript css html实现动态的给页面添加元素和样式
 //动态地添加相关元素和属性及样式         for (var i = 0; i < arr.length; i ) {
            //创建li元素并设置相关样式             var li = document.createElement('li');             var li_style = document.createAttribute('style');             li_style.value = "float: left;width:100px;height: 40px;line-height: 40px;\     text-align: center;";             li.setAttributeNode(li_style);
            //创建a元素并设置相关样式             var a = document.createElement('a');             var a_style = document.createAttribute('style');             a_style.value = "color: #fff;font-size: 16px;text-decoration: none; cursor: pointer;";             a.setAttributeNode(a_style);
            //给每个a标签添加相应的文字             a.innerHTML = arr[i];
            //将相关元素依次“传”到页面             li.appendChild(a);             ul.appendChild(li);             box.appendChild(ul);
        }