javascript如何替換div內容

# JavaScript如何替換div內容

在Web開發中，動態修改頁面元素是常見需求。本文將詳細介紹使用JavaScript替換`<div>`內容的4種主流方法，并分析其適用場景。

## 一、innerHTML屬性替換

最直接的方式是通過`innerHTML`屬性覆蓋原有內容：

```javascript
document.getElementById('myDiv').innerHTML = '<p>新內容</p>';

優點： - 支持HTML標簽解析 - 所有瀏覽器兼容

缺點： - 存在XSS注入風險（需對用戶輸入轉義） - 會破壞原有事件監聽器

二、textContent純文本替換

當只需要修改文本內容時：

document.querySelector('.content').textContent = '純文本新內容';

特點： - 自動轉義HTML標簽（顯示為文本） - 性能優于innerHTML - IE9+支持

三、DOM節點操作

通過創建新節點替換原有內容：

const div = document.getElementById('target');
const newContent = document.createElement('p');
newContent.textContent = '動態創建的內容';
div.innerHTML = ''; // 清空原有內容
div.appendChild(newContent);

適用場景： - 需要保留DOM引用時 - 復雜結構的內容替換

四、replaceWith()方法

ES6新增的節點替換API：

const oldDiv = document.getElementById('old');
const newDiv = document.createElement('div');
newDiv.innerHTML = '<span>全新內容</span>';
oldDiv.replaceWith(newDiv);

優勢： - 可以替換整個DOM元素 - 支持多參數批量替換

安全注意事項

1. 防范XSS攻擊：

function safeReplace(divId, content) {
  const div = document.getElementById(divId);
  div.textContent = content; // 自動轉義
}

1. 推薦使用textContent代替innerHTML處理用戶輸入

性能優化建議

• 批量修改時使用DocumentFragment
• 頻繁操作時先脫離DOM樹：

const temp = div.parentNode.removeChild(div);
//...執行修改
document.body.appendChild(temp);

總結

根據實際需求選擇合適方法，簡單內容替換推薦textContent，復雜結構建議使用DOM操作。 “`