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

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"
        
        style="height: 220px"
      >
        <li
          
        >
          <div >
            <div >john watson</div>
            Cras justo odio
          </div>
        </li>
        <li
          
        >
          <div >
            <div >marry anne</div>
            Cras justo odio
          </div>
        </li>
        <li
          
        >
          <div >
            <div >sherlock holmes</div>
            Cras justo odio
          </div>
        </li>
        <li
          
        >
          <div >
            <div >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.

CodePudding user response：

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

CodePudding user response：

You need set first divAddCommentList.innerHTML = "I like coffee";

after need addCommentList.appendChild(divAddCommentList);

because you set innerHTML after appendChild then innerHTML is replacing child too.

for showing "I like coffee" on top then "james bond "instead it should show "james bond" on top and "i like coffee" bottom use addCommentList.insertAdjacentElement("afterbegin", divAddName);

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);
divAddCommentList.innerHTML = "I like coffee";
divAddName.innerHTML = 'James Bond';

addCommentList.insertAdjacentElement("afterbegin", divAddName);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul
   id="comment-list"
   
   style="height: 220px"
   >
   <li
      
      >
      <div >
         <div >john watson</div>
         Cras justo odio
      </div>
   </li>
   <li
      
      >
      <div >
         <div >marry anne</div>
         Cras justo odio
      </div>
   </li>
   <li
      
      >
      <div >
         <div >sherlock holmes</div>
         Cras justo odio
      </div>
   </li>
   <li
      
      >
      <div >
         <div >james moriarty</div>
         Cras justo odio
      </div>
   </li>
</ul>