網頁開發學習 / innerHTML & appendChild 差別

使用 map 方法來遍歷數據陣列並動態生成 HTML ，例如圖片網站、使用者的資訊、新聞網站等

以下是我的side project中新聞網站的code

import { news } from "../news/news.js";

let indexNewsHTML = "";

for (let i = 0; i < 6; i++) {
  indexNewsHTML += `
      <li>
        <article>
          <a href="/新聞頁面.html" target="_blank">
              <div class="img-box js-news-page-click" data-newspage-id="${news[i].id}">
                  <div class="img" style="background-image: url(${news[i].img.rectangle})">
                  </div>
                  <p class="tag">本週最新</p>
              </div>
              <div class="txt-box">
                  <p class="cat">ニュース </p>
                  <p class="tit js-news-page-click" data-newspage-id="${news[i].id}">${news[i].headline}</p>
                  <div class="sta-box">
                      <p class="outh">By ${news[i].writer.name} </p>
                      <p class="data">${news[i].time.year}年${news[i].time.month}月${news[i].time.day}日</p>
                  </div>
              </div>
          </a>
        </article>
      </li> 
    `;
}

document.querySelector(".js-index-news-wrap").innerHTML = indexNewsHTML;

會長這樣

不過其實除了innerHTML，appendChild也可以生成 HTML

1. innerHTML:
2. • innerHTML 是一個元素屬性，它包含了該元素的 HTML 內容。
   • 使用 innerHTML 可以將一段 HTML 字符串指定給元素，這將覆蓋該元素原有的內容。
2. appendChild:

1. • appendChild 是一個方法，它用於將一個節點（node）附加到另一個節點的子節點列表的末尾。
   • 使用 appendChild 可以將一個元素或節點添加為另一個元素的子元素。

var newParagraph = document.createElement('p'); 
var textNode = document.createTextNode('New Content'); 
newParagraph.appendChild(textNode); 
document.getElementById('myElement').appendChild(newParagraph);

1. • 這樣會產生一個新的<p>，將文字節點附加到該<p>，然後將該<p>添加為 ID 為 myElement 的元素的子元素。

差異:

• 主要區別在於操作的層級和方式。
• innerHTML 主要用於直接替換或設置元素的 HTML 內容，而 appendChild 主要用於將新的節點添加到現有元素的子節點列表中。

注意:

• 使用 innerHTML 可能較簡單，但要注意它會覆蓋現有的事件和狀態。
• appendChild 則是在已有的基礎上進行擴充，更適用於不影響現有內容的情況下產生新node。