JavaScript 動態添加 div 內容 在現代 Web 開發中，動態操作 HTML 元素已經成為家常便飯，而可以通過 JavaScript 動態添加 div 內容無疑是其中最常見的操作之一。通過動態添加 div 內容，我們可以在不重新加載整個頁面的情況下實現“換膚”、“下拉加載”的交互效果等。 下面將通過幾個實例來介紹如何使用 JavaScript 動態添加 div 內容： 1. 動態添加 div 元素 可以使用以下代碼動態添加一個簡單的 div 元素： ```

HTML 代碼：

這是一個 div 元素

JavaScript 代碼：

var myDiv = document.createElement('div');
myDiv.id = 'myDiv';
myDiv.innerHTML = '這是一個 div 元素';
document.body.appendChild(myDiv);

2. 動態添加帶有樣式的 div 元素 除了在 div 內容中添加文字，還可以在其中添加圖片、視頻等多媒體元素。下面的代碼演示了如何動態添加一個帶有樣式的 div 元素： ```

HTML 代碼：

這是一個帶有樣式的 div 元素

JavaScript 代碼：

var myDiv = document.createElement('div');
myDiv.id = 'myDiv';
myDiv.style.color = 'red';
myDiv.style.fontSize = '20px';
var myImage = document.createElement('img');
myImage.src = 'my_image.jpg';
myImage.alt = 'My Image';
myDiv.appendChild(myImage);
var myParagraph = document.createElement('p');
myParagraph.innerHTML = '這是一個帶有樣式的 div 元素';
myDiv.appendChild(myParagraph);
document.body.appendChild(myDiv);

3. 動態添加帶有動畫效果的 div 元素 除了添加基本樣式，我們還可以使用 CSS3 動畫實現更為驚艷的效果。下面的代碼演示了如何使用 JavaScript 動態添加一個帶有動畫效果的 div 元素： ```

HTML 代碼：

這是一個帶有動畫效果的 div 元素

CSS 代碼：

/* 引入 animate.css 庫 *//* 定義 fadeIn 動畫 */
.fadeIn {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

JavaScript 代碼：

/* 在代碼中添加 animate.css 庫 */
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'animate.css';
document.head.appendChild(link);
var myDiv = document.createElement('div');
myDiv.id = 'myDiv';
myDiv.innerHTML = '這是一個帶有動畫效果的 div 元素';
myDiv.classList.add('animated', 'fadeIn');
document.body.appendChild(myDiv);

總結 本文介紹了 JavaScript 動態添加 div 內容的實現方法，以及如何通過 CSS 樣式和動畫實現更為豐富的效果。雖然使用 JavaScript 添加 div 內容可以實現更為靈活的交互效果，但要注意避免過度使用，否則可能會影響網頁性能和用戶體驗。