关于动态创建html中的标签

主要记录如何动态创建标签，以及给标签赋样式。最近的项目需求就是需要根据后段返回的数据长度来动态创建div以及span等标签。----2018-06-26

1、首先需要在界面上创建一个父标签，设置id为mian

    在js代码中我们要先通过id查找页面上的标签

var parentDiv = document.getElementById("main");//parentDiv既为mian的实例

2、根据获得的Json数据（arr），根据长度进行循环创建标签

for (var i = 0; i < arr.length; i++) {
        var div1 = document.createElement("div");//声明第一个div的实例
        div1.className = 'CssClass0';            //设置css样式
        parentDiv.appendChild(div1);             //将div1添加到父div（parentDiv）当中
        var div2 = document.createElement("div");//声明第二个div的实例
        div2.className = 'CssClass1';            //设置css样式
        div1.appendChild(div2);                  //将div2添加到div1当中
        var spanAV12 = document.createElement("span");//声明一个span的实例
        spanAV12.innerHTML = "输入的内容:";           //往span中写入内容，也可以是变量的值
        div2.appendChild(spanAV12);                    //将span添加到div2中

        div2.appendChild(document.createElement("br"));//添加换行

3、设置更多的属性

    设置id     div1.id = "HelloWorld";

    设置style  div1.style.cssText = "background-color:black;display:block;color:white";

    或者        div1.style.background-color = "black";

    还有就是 display:none这个属性，我经常用在一些界面上的标签或者控件，通过在style中设置这个属性来控制控件的隐藏与显示，显示只要通过id获取到这个控件的实例，然后使用show()方法即可。

    等

4、顺便提一下昨天碰到的一个问题span中的文字如何靠右显示，或局中

    先将display设置为块状显示，然后文字靠右显示即可，剧中为text-align:center

 

 

闲聊几句：最近世界杯，我猜今年法国夺冠（其实我不关注足球的，哈哈，只能凭感觉，就跟中国女排奥运会在赢了塞尔维亚之后我猜女排能夺冠的那种感觉，我是中国女排铁粉）