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权威指南》）