向html中添加節點

簡單：

①，js中：

(function () {

    var box=document.querySelector("#box");

    var con1=document.createElement("div");

    box.appendChild(con1);

})();

②，jQuery中：

$(function () {

    var con1="<div></div>";

    $("#box").append(con1);

});

進化：

實現向ul中添加節點3個li,且每個li中還有四個div,即

①，js（進化）

(function () {

    var box = document.querySelector("#box");


    for (var i = 0; i < 3; i++) {
        var li = document.createElement("li");
        box.appendChild(li);
        for (var j = 0; j < 4; j++) {
            var div = document.createElement("div");
            li.appendChild(div);
        }
    }
})();

js（超進化）

(function () {

    var box = document.querySelector("#box");
    var liString = "<li><div></div><div></div><div></div><div></div></li>";

    for (var i = 0; i < 3; i++) {
        box.innerHTML += liString;
    }

})();

這樣的好處：加快了頁面加載的速度，畢竟少了個循環╮(╯▽╰)╭

注意點：這里是innerHTML+= 不是innerHTML=，原因：innerHTML的意思是“替換”不是“添加”，如果寫成=，那么會只有一個li

js（超級進化）

(function () {

    var box = document.querySelector("#box");
    var style = document.querySelector("#style");
    var liString = "", liStyle = "";

    for (var i = 0; i < 3; i++) {
        liString += "<li><div></div><div></div><div></div><div></div></li>";
        liStyle += "#box li:nth-child(" + i + ") {background:#abcedf}"
    }
    box.innerHTML = liString;
    style.innerHTML += liStyle;

})();

這里在Html中寫了，在<style>標簽里面添加了id=“style”

好處：結合nth-child選擇器 實現了動態為每個li添加背景。

②，jQuery（進化）

$(function () {

    var li = $("<li></li>");
    var div = $("<div></div>");

    for (var i = 0; i < 3; i++) {
        var oli = li.clone();
        oli.addClass("dd");
        $("#box").append(oli);
        for (var j = 0; j < 4; j++) {
            var odiv=div.clone();
            oli.append(odiv);
        }
    }
});

jQuery(黑暗進化)

$(function () {

    var liString = "";
    for (var i = 0; i < 3; i++) {
        liString += "<li><div></div><div></div><div></div><div></div></li>";
    }

    $("#box").innerHTML = liString;

});

以上代碼通過模仿js而寫，會發現沒有任何效果，並且不報錯。呵呵了

（正如數碼寶貝，太一急切想讓亞古獸進化，結果黑暗進化了。。。）

JQuery（超級進化）

$(function () {

    var liString = "";
    for (var i = 0; i < 3; i++) {
        liString += "<li><div></div><div></div><div></div><div></div></li>";
    }

    $("#box")[0].innerHTML = liString;

});

如代碼，終於正常進化了，學習亦如此，不要急於求成。

這里，說明一下，innerHTML的行使對象應該是標簽，而不是節點，即應該是document.querySelector獲取到的，而不是$（）獲取到的

思維聯想，html新增的標簽audio,通過js控制其開始暫停，行使對象也是標簽，不是對象，詳情看一下網頁。

http://zhidao.baidu.com/link?url=qiuaU30c7BrJDQnuC7E_vP2A2KhCkM1iKaCQA_tXwzNm4M97zOLZABRXvFDGtGV02LTa-EiEZ864OMbiSXeofg3xD3Jl3cVccO38SmP-iR7