如何修復在DOMJavascript中不起作用的新評論串列？

我在 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 的作業方式與評論串列的其他子項相同。請幫我。謝謝你。

uj5u.com熱心網友回復：

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

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

uj5u.com熱心網友回復：

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

需要后addCommentList.appendChild(divAddCommentList);

因為你innerHTML之后appendChild設定innerHTML的也是替換孩子。

用于顯示"I like coffee"在頂部然后“james bond "相反它應該顯示”james bond"在頂部和"i like coffee"底部使用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"
   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>

標籤：

上一篇：如何使用帶有鍵值對的JSON列查詢表以匹配所有鍵和值

下一篇：如何影片兩個字母交換？