階層化されたタグを要素の下に追加する方法

Question

以下のコードにおきまして、a要素を格納したli要素をdiv要素配下に追加したいのですが、うまくいかなかった為、質問させて頂きました

<div id="test">

</div>

let div = document.getElementById("test")
let tag_li = document.createElement('li')
  let tag_a = document.createElement('a')
  tag_a.classList.add('dropdown-item')
  tag_li.appendChild(tag_a)
  tag_li.textContent = 'aaaa'
  div.appendChild(tag_li)
  console.log(tag_li)

こちら実装するとなぜか、a要素がli要素には追加されておらず、li要素部分にフォーカスを当ててもクリック出来ませんでした。
こちらの原因が分からない為、どなたかご助言頂けましたら幸いです。

※作成したコードですが、jsfiddleにて、再現確認可能な状態となっております。

Answer 1

tag_li.textContent = 'aaaa'

がNGです。
aaaaはtag_aのテキストなのでしょうか、それともtag_aの並びにおきたいものなのでしょうか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  let div = document.getElementById("test");
  let tag_li = document.createElement('li');
  let tag_a = document.createElement('a');
  tag_a.classList.add('dropdown-item');
  tag_a.textContent = 'aaaa';
  tag_li.appendChild(tag_a);
  tag_li.appendChild(document.createTextNode('bbbb'));
  div.appendChild(tag_li);
});
</script>
<div id="test"></div>

Comments

[ruuuu]

ご回答ありがとうございます。
> aaaaはtag_aのテキストなのでしょうか、それともtag_aの並びにおきたいものなのでしょうか？
こちら、勘違いしてしまっており、「a」タグのテキストとして設定すべきなのに、「li」タグのテキストとして追加してしまっておりました...

[ruuuu]

int32_tさんのご回答を参考にそこの部分を修正することで、解決することが出来ました。
昨日に引き続きご回答下さり、ありがとうございます。

[ruuuu]

> createTextNode
こういったメソッドものもあるのですね。参考にさせて頂きます

Answer 2

  tag_li.appendChild(tag_a)
  tag_li.textContent = 'aaaa'

tag_li.textContent をセットすることで、せっかく足した tag_a が切り離されています。 tag_a.textContent = 'aaaa' なのでは。

Comments

[ruuuu]

ご回答ありがとうございます。
> tag_li.textContent をセットすることで、せっかく足した tag_a が切り離されています。 tag_a.textContent = 'aaaa' なのでは。
こちら、ご指摘の通りでした。
「a」タグに「textContent」で文字列をセットすることで、解決することが出来ました。
迅速にご回答くださり、大変助かりました。