inputタグ(テキストボックス)の値をdivタグに直接テキストとして表示したい

Question

前提・実現したいこと

inputタグ(テキストボックス)に任意のテキストを打ち込む
↓
追加するボタンを押すとdivタグに直接テキストとして表示
↓
別のテキストを打ち込み、再度追加ボタンを押すと
1個目のテキストの後ろに表示される

例）

1. Helloと打ち込み、ボタンを押す　→　Hello
2. (1のHelloを消して)新たにWorldと打ち込み、ボタンを押す　→　HelloWorld

発生している問題・エラーメッセージ

1回目の表示はうまくいくが
2回目以降の表示がうまくいかない
具体的には、2回目の追加ボタンを押すと

HelloHelloWorld

と表示されてしまう

該当のソースコード

<!-- .valにテキストとして表示したい -->
<div class="val"></div>
<input type="text">
<div class="add">追加する</div>

document.querySelector('input').onchange = function(){
    const inputValue = document.querySelector('input').value;
    const addBtn = document.querySelector('.add');
    addBtn.addEventListener('click', function(){
        const div = document.querySelector('.val');
        div.append(inputValue);
    });
}

試したこと

.valueで取得した値を
append(),textContent,innerHTML
で出力してみたが、どれもうまくいかなかった

console.log()で取得したinputタグの値を確認したところ、2回目以降は1個前までの値を重複して取得していることがわかったので、値の取得方法に何かしらの制限をかける必要がありそうだと思ったのですが、手詰まりとなってしまいました。

補足情報

素のJavaScriptで解決したいと考えています。
HTMLの記述に対する改善はあると思いますが、ひとまず今回の状況での解決方法やヒントをご教授いただけると幸いです。

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  const val=document.querySelector('.val');
  const txt=document.querySelector('input');
  const add=document.querySelector('.add');
  add.addEventListener('click',()=>{
    val.textContent+=txt.value;
  });
});

Comments

[proguma]

ご回答ありがとうございます。
window自体にイベントを追加するという発想がなかったので、とても勉強になりました！
DOMContentLoadedや演算子についても調べてみます。

Answer 2

<script> function add(){ message.innerText+=txt.value; } </script> <input type="text" id="txt"> <input type="button" value="追加" onclick="add()"> <div id="message"></div>

Comments

[proguma]

ご回答ありがとうございます。
かなり少ない量のコードで実装可能なのですね！
今後の実装時にはinputタグの記述にも注意を払おうと思います。