DOM程式設計之innerHTML和innerText操作div和span
阿新 • • 發佈：2020-09-04
innerHTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ background-color: aqua; width: 200px; height: 200px; } </style> </head> <body> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ //設定div內容 //1、獲取div物件 var divElt = document.getElementById("div1"); //使用innerHTML屬性來設定元素內部的內容 divElt.innerHTML = "<font color='red'>這是innerHTML</font>"; } } </script> <input type="button" value="設定div中的內容" id="btn" /> <div id="div1"></div> </body> </html>
點選按鈕：
innerText
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ background-color: aqua; width: 200px; height: 200px; } </style> </head> <body> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ //設定div內容 //1、獲取div物件 var divElt = document.getElementById("div1"); //使用innerText屬性來設定元素內部的內容 divElt.innerText = "<font color='red'>這是innerText</font>"; } } </script> <input type="button" value="設定div中的內容" id="btn" /> <div id="div1"></div> </body> </html>
innerText和innerHTML屬性的區別
相同點：都是設定元素內部的內容。
不同點：innerHTML會把後面的"字串“當做一段HTML程式碼解釋並執行。innerText是即使後面是一段HTML程式碼，也只是將其當做普通的字串來看待。