溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript HTML DOM中如何改變HTML元素的內容和屬性，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
JavaScript HTML DOM - 改變 HTML
HTML DOM 允許 JavaScript 改變 HTML 元素的內容。
改變 HTML 輸出流
JavaScript 能夠創建動態的 HTML 內容，如獲取當前日期和時間。
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內容。
document.write(Date());
提示：絕不要使用在文檔加載之后使用 document.write()。這會覆蓋該文檔。
改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個語法：
document.getElementById(id).innerHTML=new HTML
下面的實例改變了 <p> 元素的內容：
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>上面的段落被一條 JavaScript 腳本修改了。</p>
</body>
</html>下面的實例改變了 <h2> 元素的內容：
<!DOCTYPE html>
<html>
<body>
<h2 id="header">Old Header</h2>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
<p>"Old Header" 已被修改為 "New Header"。</p>
</body>
</html>注釋：使用 HTML DOM 來獲得 id="header" 的元素，JS 更改此元素的內容 (innerHTML)。
改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個語法：
document.getElementById(id).attribute=new value
下面的實例改變了 <img> 元素的 src 屬性：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原始圖片是 smiley.gif，但是已被修改為 landscape.jpg。</p>
</body>
</html>注釋：使用 HTML DOM 來獲得 id="image" 的元素，JavaScript 更改此元素的屬性。
看完了這篇文章，相信你對“JavaScript HTML DOM中如何改變HTML元素的內容和屬性”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
