JQuery應用例項學習 —— 18 利用DOM物件改變HTML內容及屬性例項
阿新 • • 發佈：2018-12-09
以下內容轉自w3school。
改變 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>
本例改變了 <h1> 元素的內容：
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個語法： document.getElementById(id).attribute=new value
本例改變了 <img> 元素的 src 屬性：
<!DOCTYPE html> <html> <body> <img id="image" src="/i/eg_tulip.jpg" /> <script> document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg"; </script> <p>原始圖片是鬱金香（eg_tulip.jpg），但是已被修改為盧浦大橋（shanghai_lupu_bridge.jpg）。</p> </body> </html>
例子解釋： 上面的 HTML 文件含有 id="image" 的 <img> 元素 我們使用 HTML DOM 來獲得 id="image" 的元素 JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）