div 動態修改

div（即division）是HTML中的一個最基本的塊級元素，可用于創建頁面的結構和布局。通過CSS和JavaScript的配合使用，我們可以動態地修改div元素的樣式和內容，從而實現更豐富的頁面效果。

案例一：動態修改背景顏色

<div class="example">

通過JavaScript代碼，我們可以實現當鼠標懸停在div元素上時，改變其背景顏色。

\<div id="myDiv" onmouseover="changeColor()" onmouseout="restoreColor()">這是一個div元素\</div>

\<script>
function changeColor() {
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
}
<br>
        function restoreColor() {
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "white";
}
\</script>

</div>

在上述代碼中，我們為div元素添加了onmouseover和onmouseout兩個事件處理函數。當鼠標懸停在div元素上時，調用changeColor()函數將背景顏色設置為紅色；當鼠標移出div元素時，調用restoreColor()函數將背景顏色恢復為白色。

案例二：動態修改文本內容

<div class="example">

除了樣式，我們還可以通過JavaScript動態修改div元素的文本內容。

\<div id="myDiv">這是初始文本\</div>

\<script>
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "這是修改后的文本";
\</script>

</div>

上述代碼中，我們使用innerHTML屬性將div元素的文本內容修改為"這是修改后的文本"。通過將新的文本賦值給innerHTML，我們可以隨時動態地更改div元素的內容。

案例三：動態添加/移除子元素

<div class="example">

我們還可以通過JavaScript動態地添加或移除div元素的子元素。

\<div id="myDiv">這是一個父元素\</div>

\<script>
var myDiv = document.getElementById("myDiv");
var newElement = document.createElement("p");
newElement.innerHTML = "這是一個子元素";
myDiv.appendChild(newElement);
<br>
        myDiv.removeChild(newElement);
\</script>

</div>

在上述代碼中，我們使用createElement創建一個新的p元素，并將其文本內容設置為"這是一個子元素"。然后，通過appendChild方法將新的子元素添加到div元素中。最后，使用removeChild方法將子元素從div元素中移除。

通過以上示例，我們可以看到通過JavaScript我們可以動態地修改div元素的樣式、內容，甚至是添加、移除子元素。這使得我們能夠靈活地根據需要改變頁面的顯示效果，提升用戶體驗。