JavaScript与jQuery其他操作对比

JavaScript

hxb.insertBefore(Element,hxb.firstElementChild);  //在hxb中插入子节点/文本到最开始
hxb.appendChild(Element);                         //在hxb中插入子节点/文本到最后
hxb.removeChild(Element);                         //删除hxb中的子节点/文本
hxb.insertBefore(newElement,targetElement);       //在hxb中插入newElement到子节点targetElement之前。
hxb.insertAfter(newElement,targetElement);        //在hxb中插入newElement到子节点targetElement之后。因为js中没有insertAfter()方法，所以自己写一个。

/* insertAfter()方法 */
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastElementChild === targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextElementSibling);
    }
}

jQuery

$('#id').append($('.appendDom'));       //在#id的最后添加.appendDom元素节点
$('#id').prevpend($('appendDom'));      //在#id的最开始添加.appendDom元素节点
$('#id').after($('appendDom'));         //在#id节点之前添加.appendDom元素节点
$('#id').before($('appendDom'));        //在#id节点之后添加.appendDom元素节点
$('.appendDom').appendTo('#id');        //把.appendDom元素节点插入到#id节点的最后(内部)（和append效果相同）
$('.appendDom').prevpendTo('#id');      //把.appendDom元素节点插入到#id节点的最开始(内部)（和prevpend效果相同）
$('.appendDom').insertAfter('#id');     //把.appendDom元素节点插入到#id节点之后(同级)（和after效果相同）
$('.appendDom').insertBefore('#id');    //把.appendDom元素节点插入到#id节点之前(同级)（和before效果相同）