原生JS和jQuery操作DOM的示例

一、创建元素节点 1、原生JS创建元素节点 document.createElement("div"); 2、jQuery创建元素节点 $('<div></div>'); 二、创建并添加文本节点 1、原生JS创建文本...

一、创建元素节点


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

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
廖雪
廖雪

78 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章