溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“javascript怎么修改html內容”，內容詳細，步驟清晰，細節處理妥當，希望這篇“javascript怎么修改html內容”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
javascript修改html內容的方法：1、使用innerHTML屬性修改html內容；2、使用innerText屬性修改html內容；3、使用uterText 屬性修改html內容；4、使用outerHTML屬性修改html內容。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
方法1：使用innerHTML屬性修改html內容
innerHTML 屬性設置或返回表格行的開始和結束標簽之間的 HTML。
方法2：使用innerText屬性修改html內容
innerText 在指定元素中插入文本內容，如果文本中包含 HTML 字符串，將被編碼顯示。
瀏覽器支持狀態：IE 4+、Safari 3+、Chrome 和 Opera 8+。Firefox 提供 textContent 屬性支持相同的功能。支持 textContent 屬性的瀏覽器還有 IE 9+、Safari 3+、Opera 10+ 和 Chrome。
方法3：使用uterText 屬性修改html內容
outerText 與 innerText 功能相似，但是它能夠覆蓋原有的元素。
方法4：使用outerHTML屬性修改html內容
示例
下面示例使用 outerText、innerText、outerHTML 和 innerHTML 這 4 種屬性為列表結構中不同列表項插入文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>單擊回答問題</h2>
<ul>
<li>你好</li>
<li>你叫什么？</li>
<li>你是什么職業？</li>
<li>你喜歡 JS 嗎？</li>
</ul>
<script>
ul = document.getElementsByTagName("ul")[0]; //獲取列表結構
var lis = ul.getElementsByTagName("li"); //獲取列表結構的所有列表項
lis[0].onclick = function () { //為第一個列表項綁定事件處理函數
this.innerText = "謝謝"; //替換文本
}
lis[1].onclick = function () { //為第二個列表項綁定事件處理函數
this.innerHTML = "<h3>我叫 億速云</h3>"; //替換HTML文本
}
lis[2].onclick = function () { //為第三個列表項綁定事件處理函數
this.outerText = "我是學生"; //覆蓋列表項標簽及其包含內容
}
lis[3].onclick = function () { //為第四個列表項綁定事件處理函數
this.outerHTML = "<h3>當然喜歡</h3>"; //覆蓋列表項標簽及其包含內容
}
</script>
</body>
</script>
</html>輸出：
讀到這里，這篇“javascript怎么修改html內容”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
