JQuery插入新的元素结点方法汇总

注意：下面的方法插入或者追加的内容可以是自己创建的新节点，同时也可以是已经存在的html标记的元素节点，若为已存在的元素节点，则次元素节点将会被移动到其所对应的操作的位置。

1、prepend 

    在 target 的头部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的first子节点

    父元素 挂 子元素

$('target').prepend( new_jquery_element / $('selector') );

2、append 

    在 target 的尾部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的last子节点  

    父元素 挂 子元素

$('target').append( new_jquery_element / $('selector') );

3、prependTo 

    在 target 的头部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的first子节点  

    子元素 挂到 父元素

 new_jquery_element / $('selector').prependTo( $('target') );

4、appendTo 

    在 target 的尾部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的last子节点  

    子元素 挂到 父元素

 new_jquery_element / $('selector').appendTo( $('target') );

5、before 

    在 target 的前部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的prev兄弟节点

    目标 挂 内容

$('target').before( new_jquery_element / $('selector') );

6、after 

    在  target 的后部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的next兄弟节点

    目标 挂 内容

$('target').after( new_jquery_element / $('selector') );

7、insertBefore 

    在target的前部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的prev兄弟节点

    内容 挂到 目标

$( new_jquery_element / $('selector') ).insertBefore( $('selector') );

8、insertAfter 

    在 target 的后部添加，将你新创建的元素节点or选择的元素节点插入并作为其最新的next兄弟节点

    内容 挂到 目标

$( new_jquery_element / $('selector') ).insertAfter( $('target ') );

总结：

    append appendTo

    prepend prependTo

    before insertBefore

    after insetAfter

    功能一样，只不过是谁去做内容谁去做目标

JS插入新元素/设置添加新属性节点

//创建元素节点
var container = document.createElement('div');
var content = document.createElement('p');

//创建文本节点
var title = document.createTextNode('this is title');

//创建属性节点
var dateAttr = document.createAttribute('date');
dateAttr.value = new Date();

//普通挂载
content.appendChild(title);
container.appendChild(content);
//属性节点挂载 注意别和setAttribute混了
container.setAttributeNode(dateAttr);