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