JavaScript那些事兒（1）：對比JavaScript和jQuery的Dom操作

     正在著手看《javascript權威指南》，整理點兒筆記，也算是督促自己學習，每天看一點，特立此貼，希望自己能堅持下去。

 

對比：用javascript和jQuery分別判斷某元素是否存在，如果不存在則建立，並向其中追加子項目

（1）javascript的實現

//在document中的一個指定的地區輸出調試訊息function debug(msg) {    var log = document.getElementById("debuglog");    if (!log) {        log = document.createElement("div");        log.id = "debuglog";                  //給這個元素的HTML id賦值        log.innerHTML = "<h1>Debug Log</h1>";        document.body.appendChild(log);    }    //將訊息封裝在<pre>中，並添加至log中    var pre = document.createElement("pre");    var text = document.createTextNode(msg);  //將msg封裝在一個文本節點中    pre.appendChild(text);                    //將文本添加至<pre>    log.appendChild(pre);}

（2）jQuery的實現

function debug(msg) {    var log = $("#debuglog");    if (log.length == 0) {        log = $("<div id='debuglog'><h1>Debug Log</h1></div>");        log.appendTo(document.body);    }    log.append($("<pre/>").text(msg));        //將msg封裝在<pre>中，再追加到log裡}

jQuery, write less do more. 由此可見，名不虛傳。

（聲明：以上代碼來自《Javascript權威指南》）