append()とappendTo()はともに要素に引数を指定してコンテンツを後ろに追加（または移動）するというものですが、追加する方向と追加元の処理が違います。

下側の[ダミーテキスト] 内（オレンジ色の囲み）の赤文字部分が#st01、背景が黄色のテキストが#tuikaです。

1から4の「下のソースを実行」ボタンをクリックすると、その下側のソース内容を実行します。
append()では、追加元（#tuika）の内容をコピーして、追加先の要素の後へ文字列として追加します。
appendTo()では、append()と追加元と追加先が逆になり、#st01の文字列を#tuikaの要素の後に移動します。

[ダミーテキスト] ポイントカードを発行し、商品の購入者に対し 次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は

左のソース

1. append()　下のソースを実行　html要素としての#tuikaの内容が#st01の後ろへ追加されます。
   

   var htmlStr2=$("#tuika").html();
    $('#st01').append(htmlStr2);

2. append()　下のソースを実行　テキストとしての#tuikaの内容が#st01の後ろへ追加されます。
   

   var htmlStr2=$("#tuika").text(); 
   
   							$('#st01').append(htmlStr2);

3. appendTo()　下のソースを実行　html要素としての#st01全体が#tuikaの後ろに移動します。
   

   $('#st01').appendTo('#tuika');

4. appendTo()　下のソースを実行　移動先をダミーのタグなどにすると結果として#tuikaへの追加部分が消えます。
   

   $('#st01').appendTo('<b>');