溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
