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 = "

Debug Log

"; document.body.appendChild(log); } //将消息包装在
中,并添加至log中
    var pre = document.createElement("pre");
    var text = document.createTextNode(msg);  //将msg包装在一个文本节点中
    pre.appendChild(text);                    //将文本添加至

    log.appendChild(pre);
}

(2)jQuery的实现

function debug(msg) {
    var log = $("#debuglog");
    if (log.length == 0) {
        log = $("

Debug Log

"); log.appendTo(document.body); } log.append($("
").text(msg));        //将msg包装在
中,再追加到log里
}

jQuery, write less do more. 由此可见,名不虚传。

(声明:以上代码来自《Javascript权威指南》)

转载于:https://www.cnblogs.com/jacktag/archive/2013/04/16/3024962.html

你可能感兴趣的:(JavaScript那些事儿(1):对比JavaScript和jQuery的Dom操作)