在 JavaScript 中，你可以使用幾種方法來修改 div 元件顯示的內容

1. 使用 innerHTML 修改內容

innerHTML 屬性允許你獲取或設定元素的 HTML 內容。這對於修改 <div> 內部的 HTML 結構非常有用。

範例：

<div id="myDiv">Hello World</div>

<script>
  // 修改內容
  document.getElementById("myDiv").innerHTML = "New Content!";
</script>

修改後，<div> 的顯示內容會變為 "New Content!"。

2. 使用 textContent 修改內容

如果你只想更改文本內容，而不包括 HTML 標籤，則可以使用 textContent。這樣會保留純文字內容，並去除任何 HTML 標籤。

範例：

<div id="myDiv">Hello <strong>World</strong></div>

<script>
  // 修改純文本內容
  document.getElementById("myDiv").textContent = "New Text Content!";
</script>

修改後，<div> 只會顯示 "New Text Content!"，即使原本有 <strong> 標籤，它也會被移除。

3. 修改 innerText（類似於 textContent）

innerText 也會設定元素的文本內容，但它會遵循樣式，例如 CSS 隱藏的元素不會顯示，而 textContent 則不受此影響。通常 textContent 是更推薦的選擇，但 innerText 在某些情況下可能更適合。

範例：

<div id="myDiv">Hello <strong>World</strong></div>

<script>
  // 使用 innerText 修改純文本內容
  document.getElementById("myDiv").innerText = "Updated Text!";
</script>

這樣 <div> 也會顯示 "Updated Text!"。

4. 修改屬性或樣式

除了修改內容，還可以修改 div 的其他屬性，如 style 屬性來更改顯示效果。

修改樣式：

<div id="myDiv">This is a styled div</div>

<script>
  // 修改背景色
  document.getElementById("myDiv").style.backgroundColor = "lightblue";
  
  // 修改字體顏色
  document.getElementById("myDiv").style.color = "red";
</script>

小結：

• innerHTML：用來修改元素的 HTML 內容，可以嵌入 HTML 標籤。
• textContent：用來修改元素的純文本內容，忽略 HTML 標籤。
• innerText：用來修改元素的純文本內容，並考慮顯示樣式（如 display: none 的元素會被忽略）。
• style：用來修改元素的 CSS 樣式。