How can I fix new comment list not working in DOM Javascript?

I have list of name and comment in ul and li. But when I tried to adding new list the name is not working. The text of name should be bold but it hidden. Here is my html

   <ul
        id="comment-list"
        class="list-group list-group-flush overflow-auto"
        style="height: 220px"
      >
        <li
          class="
            list-group-item
            d-flex
            justify-content-between
            align-items-start
          "
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold text-capitalize">john watson</div>
            Cras justo odio
          </div>
        </li>
        <li
          class="
            list-group-item
            d-flex
            justify-content-between
            align-items-start
          "
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold text-capitalize">marry anne</div>
            Cras justo odio
          </div>
        </li>
        <li
          class="
            list-group-item
            d-flex
            justify-content-between
            align-items-start
          "
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold text-capitalize">sherlock holmes</div>
            Cras justo odio
          </div>
        </li>
        <li
          class="
            list-group-item
            d-flex
            justify-content-between
            align-items-start
          "
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold text-capitalize">james moriarty</div>
            Cras justo odio
          </div>
        </li>
      </ul>

Here is my progress of dom javascript file:

 const elCommentList = document.querySelector('#comment-list');
var addCommentList = document.createElement("li");
    addCommentList.classList.add("list-group-item", "d-flex", "justify-content-between", "align-items-start");
    console.log(addCommentList);

var divAddCommentList = document.createElement("div");
divAddCommentList.classList.add("ms-2", "me-auto");
console.log(divAddCommentList);

var divAddName = document.createElement("div");
divAddName.classList.add("fw-bold", "text-capitalize");
console.log(divAddName);

elCommentList.appendChild(addCommentList);
addCommentList.appendChild(divAddCommentList);
divAddCommentList.appendChild(divAddName);


divAddName.innerHTML = 'James Bond'; --->> **this text is not working**
divAddCommentList.innerHTML = "I like coffee"; ---> **this text is working**

I want to divAddName and divAddCommentList is working same like other child of comment list. Please help me. Thank you.

>Solution :

Small issue is at the end you were replacing child node (because of that divAddName were getting replaced by divAddCommentList), instead you need to append parent text

divAddName.innerHTML = 'James Bond';
divAddCommentList.append("I like coffee"); // -> Here