主要記錄如何動態建立標籤，以及給標籤賦樣式。最近的專案需求就是需要根據後段返回的資料長度來動態建立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中的文字如何靠右顯示，或局中

<span style="display:block;width:100%;text-align: right;"></span>

    先將display設定為塊狀顯示，然後文字靠右顯示即可，劇中為text-align:center

閒聊幾句：最近世界盃，我猜今年法國奪冠（其實我不關注足球的，哈哈，只能憑感覺，就跟中國女排奧運會在贏了塞爾維亞之後我猜女排能奪冠的那種感覺，我是中國女排鐵粉）