原文地址：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的更多知識，請繼續關注！