jQueryでエスケープしたいのでが、うまくいきません。

Question

jQueryで取得した要素をエスケープしたいと思います。
理想は

<h1>たいとる</h1>

というのを取得したときにエスケープして復元した状態である

<h1>たいとる</h1>

としたいのですが、どうしても太字のまま出力されてしまいます。
以下のコードでためしてみました。

$(function(){
  $('.end').click(function(){
    $('dl').each(function(){
      $('div.show').append($(this).prop('outerHTML'));
    });
  });
});

しかし、これではエスケープされずに、cssなどの効果が適応されたまま出力されてしまいます。どなたか、おおしえください。

Answer 1

var text = $('h1').text();
$('div.show').append(text);

と言った具合でいかがでしょうか？

Answer 2

cssなどの効果が適応されたまま出力されてしまいます。

外部からの要素を挿入した際に適用されるCSSはそのページのCSSとブラウザのデフォルトCSSです。
太字になるのは h1 要素にデフォルトで当たっているスタイルの影響です。

下記のようにスタイルを当てるのが手早いでしょう。

div.show h1 {
    font-weight: normal;
}