西门的后花园

JavaScript和jQuery的DOM操作对比

JavaScript	jQuery
appendChild() el.appendChild(node);	append() $('.dom_jq_append').append('<p>新插入元素</p>'); appendTo() $('<p>新插入元素</p>').appendTo('.dom_jq_appendTo'); after() $('.dom_jq_after .head').after('<p>新插入元素</p>'); insertAfter() $('<p>新插入元素</p>').insertAfter('.dom_jq_insertAfter .head');
insertBefore() el.insertBefore(node,el.firstChild);	prepend() $('.dom_jq_prepend').prepend('<p>新插入元素</p>'); prependTo() $('<p>新插入元素</p>').prependTo('.dom_jq_prependTo'); before() $('.dom_jq_before .head').before('<p>新插入元素</p>'); insertBefore() $('<p>新插入元素</p>').insertBefore('.dom_jq_insertBefore .head');
removeChild() 删除的元素 // 因为removeChild是删除子节点，所以先parentNode父级，再删除子节点，就是自身 el.parentNode.removeChild(el);	remove() 删除的元素 $('.dom_jq_remove p').remove();
replaceChild() 替换的元素 el.replaceChild(node,el.querySelector('p'));	replaceWith() 替换的元素 $('.dom_jq_replaceWith p').replaceWith('<p>新建的元素</p>'); replaceAll() 替换的元素 $('<p>新建的元素</p>').replaceAll('.dom_jq_replaceAll p');