如何修復在 DOM Javascript 中不起作用的新評論列表？

Question

我在 ul 和 li 中有姓名和評論列表。 但是當我嘗試添加新列表時，名稱不起作用。 名稱的文本應該是粗體，但它是隱藏的。 這是我的 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>

這是我的 dom javascript 文件的進度：

 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**

我想 divAddName 和 divAddCommentList 的工作方式與評論列表的其他子項相同。 請幫我。 謝謝你。

Answer 1

你需要先設置divAddCommentList.innerHTML = "I like coffee";

后需要addCommentList.appendChild(divAddCommentList);

因為您在appendChild之后設置了innerHTML ，所以innerHTML也正在替換 child。

 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"; addCommentList.appendChild(divAddCommentList); divAddCommentList.appendChild(divAddName); divAddName.innerHTML = 'James Bond';

 <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" 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>

Answer 2

小問題是最后你要替換子節點（因為 divAddName 被 divAddCommentList 替換），而不是你需要 append 父文本

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