原生JS和jQuery操作DOM的示例

一、创建元素节点

 

1、原生JS创建元素节点

 

document.createElement("div");

2、jQuery创建元素节点

 

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

 

 

二、创建并添加文本节点

 

1、原生JS创建文本节点

 

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

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

 

var $div = $('<div>Hello World!</div>');

 

 

三、复制节点

 

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("<div>Hello World!</div>");

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

 

$('<div>Hello World!</div>').appendTo('#div1);

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

 

$('#divl').prepend('<div>Hello World!</div>');

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

 

$('<div>Hello World!</div>').prependTo('#divl');

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

 

$('#divl').before('<div>Hello World!</div>');

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

 

$('<div>Hello World!</div>').insertBefore('#divl');

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

 

$('#divl').after('<div>Hello World!</div>');

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

 

$('<div>Hello World!</div>').insertAfter('#divl');

 

 

五、删除节点

 

1、原生JS删除节点

 

node.parentNode.removeChild(node);

2、jQuery删除节点

 

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

 

 

六、替换节点

 

1、原生JS替换节点

 

parentNode.repalceChild(newNode, oldNode);

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

 

2、jQuery替换节点

 

$('#div1').replaceWith('<div>Hello World!</div>');

 

 

七、设置/获取属性

 

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");