浅谈原生JS和jQuery操作DOM

一、创建元素节点

1、原生JS创建元素节点

document.createElement("div");

2、jQuery创建元素节点

$('
');

二、创建并添加文本节点

1、原生JS创建文本节点

var text = document.createTextNode("Hello World!");
var div = document.createElement("div");
div.appendChild(text);

2、jQuery创建并添加文本节点

var $div = $('
Hello World!
');

三、复制节点

1、原生JS复制节点

var div = document.getElementById("div1");
var node = div.cloneNode(true); 

注意：true表示克隆整个节点，包括所有子节点；false表示该节点，不克隆子节点。

2、jQuery复制节点

var node = $('#div1).clone(true);

注意：复制节点要避免id重复。

 

四、 插入节点

1、原生JS插入节点

（1）原生JS在末尾插入新的子节点

parentNode.appendChild(newNode);

（2）原生JS在已有子节点之前插入新的子节点

parentNode.insertBefore(newNode, targetNode);

注意：原生JS没有insertAfter()方法。

2、jQuery插入节点

（1）在匹配元素子节点末尾插入节点

$('#div1).append("
Hello World!
");

（2）把节点插入到匹配元素子节点末尾

$('
Hello World!
').appendTo('#div1);

（3）在匹配元素子节点开头插入节点

$('#divl').prepend('
Hello World!
');

（4）把节点插入到匹配元素子节点开头

$('
Hello World!
').prependTo('#divl');

（5）在匹配元素之前插入节点

$('#divl').before('
Hello World!
');

（6）把节点插入到匹配元素之前

$('
Hello World!
').insertBefore('#divl');

（7）在匹配元素之后插入节点

$('#divl').after('
Hello World!
');

（8）把节点插入到匹配元素之后

$('
Hello World!
').insertAfter('#divl');

五、删除节点

1、原生JS删除节点

node.parentNode.removeChild(node);

2、jQuery删除节点

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

六、替换节点

1、原生JS替换节点

parentNode.repalceChild(newNode, oldNode);

注意：oldNode必须是parentNode真实存在的一个子节点。

2、jQuery替换节点

$('#div1').replaceWith('
Hello World!
');

七、设置/获取属性

1、原生JS设置/获取属性

（1）设置属性

node.setAttribute("background", "red");
checkboxEl.checked = true;

（2）获取属性

imgEl.getAttribute("background");
checkboxEl.checked;

2、jQuery设置/获取属性:

（1）设置属性

$("#div1").attr({"background": "red"});
$("#checkbox1").prop({"checked": true});

（2）获取属性

$("#div1").attr("background");
$("#checkbox1").prop("checked");