appendで選択した要素を置き換えて表示させたい

Question

##実現したいこと
リスト（色名）をクリックする度に、<p>タグにその色名を置き換えて出力したいのですが、
以下コードだと、

<ul>
  <li>あか</li>
  <li>あお</li>
  <li>きいろ</li>
</ul>
<p></p>

$(function(){
  var btn = $('li');
  
  btn.on('click', function(){
    var selectTxt = '選択色: ' + $(this).text();
    $('p').append(selectTxt);
  });
});

選択色: あか選択色: あお選択色: きいろ・・・

と、直前に選択した色名が消えず（置き換わらず）に、延々と繰り返されて表示されてしまいます。

解決方法をご教授いただけますでしょうか。
よろしくお願いいたします。

Answer 1

// $('p').append(selectTxt);
//         ↓
   $('p').text(selectTxt);

Comments

[200107]

これに気付けずお恥ずかしい限りです。回答ありがとうございました！

Answer 2

appendせずにtextContentを書き換えてください

Comments

[yambejp]

<ul>
<li>あか</li>
<li>あお</li>
<li>きいろ</li>
</ul>
<p></p>
<script>
document.querySelectorAll('li').forEach(x=>{
x.addEventListener('click',e=>{
document.querySelector('p').textContent=x.textContent;
});
});
</script>

jQueryでやるならtext()で書き換え

[200107]

解決いたしました。ご丁寧にコードを添えていただきありがとうございます！