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

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