在前端開發中,JavaScript是必不可少的一門語言。它可以幫助我們通過操作DOM來動態地修改HTML文檔。今天我們就來探討一下JavaScript如何修改HTML文檔。
1.修改元素內容
要修改HTML文檔中的元素內容,我們可以使用innerHTML屬性。這個屬性可以獲取或設置HTML元素的內容。例如,我們有一個p標簽,要把它的文本修改為“Hello World!”。
<p id="demo">This is a demo.</p>這樣,就把p標簽的內容修改為了“Hello World!”。同樣的,我們也可以用innerHTML插入其他HTML元素,如圖片、ul、a等等。 2.修改元素屬性 除了內容,我們還可以通過JavaScript來修改HTML元素的屬性。要修改元素的屬性,我們可以使用setAttribute方法。例如,我們要把一個圖片的src屬性修改為另一張圖片的地址。<img id="myImg" src="img1.jpg" width="200">這樣,圖片的src屬性就被修改成了img2.jpg。 3.添加和刪除元素 有時候我們需要動態地添加或刪除HTML元素。要添加一個元素,我們可以使用createElement方法創建一個新元素,然后使用appendChild方法將它添加到目標元素中。例如,我們要添加一個新的li元素到一個ul列表中。<ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>這樣,就在ul列表中添加了一個新的li元素,其內容為“Item 4”。 同樣的,要刪除一個元素,我們可以使用removeChild方法。例如,我們要刪除一個div元素。 <div id="myDiv">This is my div.</div>