JQuery和js对dom节点操作的区别

注意：

1. 通常创建文本节点和创建元素节点配合使用，比如：

   var textEl = document.createTextNode("Hello World.");    var pEl = document.createElement("p");

   pEl.appendChild(textEl);

2. 克隆节点要避免`ID重复，true：深层复制，false：浅层复制

3. 替换时oldNode必须是parentEl真实存在的一个子节点

Js和jquery操作dom节点的区别

Dom操作

Js

Jquery

创建元素节点

document.createElement("p");

$('<p></p>');

创建并添加文本节点

document.createTextNode("Text Content");

var $p = $('<p>Hello World.</p>');

复制节点

var newEl = pEl.cloneNode(true);

$newEl = $('#pEl').clone(true);

插入节点

El.appendChild(newNode);（末尾插入）

$('#El').append('<p>Hello World.</p>');

或$('<p>Hello World.</p>').appendTo('#El');（末尾插入）

$('#El').after('<p>Hello World.</p>');

或$('<p>Hello World.</p>').insertAfter('#El');

El.insertBefore(newNode, targetNode);（首头插入）

$('#El').prepend('<p>Hello World.</p>');

或$('<p>Hello World.</p>').prependTo('#El');（首头插入）

$('#El').before('<p>Hello World.</p>');

或$('<p>Hello World.</p>').insertBefore('#El');

删除节点

El.parentNode.removeChild(El);

$('#El').remove();

替换节点

El.repalceChild(newNode, oldNode);

$('p').replaceWith('<p>Hello World.</p>');

设置属性/获取属性

imgEl.setAttribute("title", "logo");

imgEl.getAttribute("title");

$("#logo").attr({"title": "logo"});

$("#logo").attr("title");