首頁 > 開發者 > JavaScript
原文地址：http://www.qeefee.com/js/change-html-used-javascript
更多Javascript教程，歡迎訪問起飛網>>Javascript教程
本文：Javascript通常被用來操作HTML，改變網頁內容！
向頁面輸出內容Javascript提供了document.write('string')方法來向頁面寫入內容：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>使用Javascript改變HTML內容的測試-起飛網</title> <script type="text/javascript"> document.write("我是來自JS的內容~"); function writeHtmlLater() { document.write("哈哈，我把內容覆蓋了~"); } </script></head><body> <h1>使用Javascript改變HTML內容的測試-起飛網</h1> <p><input type="button" value="點擊覆蓋所有內容" onclick="writeHtmlLater()" /></p></body></html>
你可以把這段代碼複製到html檔案中，並運行，當頁面在瀏覽器中運行時，效果
這個時候我們點擊按鈕，你會發現頁面中的所有內容都被覆蓋了：
覆蓋頁面內容的“罪魁禍首”就是按鈕onclick事件所調用的writeHtmlLater方法，這個方法同樣是向頁面中寫入一句話，但卻把整個頁面都覆蓋了，這裡需要注意：
document.write() 僅僅向文檔輸出寫內容，如果在文檔已完成載入後執行 document.write，整個 HTML 頁面將被覆蓋。
改變HTML標籤內容我們使用JS並不僅僅是向文檔輸出一些內容，更多的是改變已存在標籤的顯示。在Javascript中提供了訪問文檔標籤的方法：document.getElementById()方法，我們可以通過這個方法得到想要操作的HTML標籤，並改變它們的顯示：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>使用Javascript改變HTML內容的測試-起飛網</title> <script type="text/javascript"> function changeMySpanHtml() { document.getElementById("mySpan").innerHTML = "我是被JS改變後的內容"; } </script></head><body> <h1>使用Javascript改變HTML內容的測試-起飛網</h1> <p>span內容：<span id="mySpan">我是span標籤的原始內容！</span></p> <p><input type="button" value="點擊改變span內容" onclick="changeMySpanHtml()" /></p></body></html>
運行這段代碼，你會看到如下頁面內容：
當我們點擊改變Span內容按鈕後，你會發現span標籤的內容改變了：
這是因為我們在代碼中擷取到了這個標籤，並重新為它的innerHTML 屬性賦值所引起的。
這篇文章簡單的介紹了改變HTML內容的兩種方式，在後續的章節中我會介紹Javascript的更多知識，請繼續關注！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
