注意:
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"); |