一.初認識
innerHTML是元素里的文字 換行 標簽...
innerHTML可進行讀操作
格式:變量名.innerHTML
innerHTML可進行寫操作
格式:變量名.innerH=值(可是文字,也可是標簽)
二.innerHTML的讀操作示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>InnerHtml</title> 6 </head> 7 <body> 8 <input type="button" value="onclickMe" id="點我"> 9 <div id="box"> 10 <span>猝然臨之而不驚</span> 11 </div> 12 </body> 13 </html> 14 <script type="text/javascript"> 15 /*獲取對應元素id*/ 16 var button=document.getElementById('點我'); 17 var box=document.getElementById('box'); 18 // 讀操作 19 alert(box.innerHTML); 20 </script>
上述代碼在通過元素id獲取了元素區域(div區域)后,進行讀操作
alert(box.innerHTML);
效果:
因為div中的內容是:
<span>猝然臨之而不驚</span>所以它把標簽也顯示出來了
三.innerHTML的寫操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>InnerHtml</title> </head> <body> <input type="button" value="onclickMe" id="點我"> <div id="box"> <span>猝然臨之而不驚</span> </div> </body> </html> <script type="text/javascript"> /*獲取對應元素id*/ var button=document.getElementById('點我'); var box=document.getElementById('box'); // 寫操作 button.onclick=function(){ box.innerHTML='無故加之而不怒'; }; </script>
對照着理解一下,寫操作的格式:變量名.innerHTML='新值';
點擊按鈕前:
點擊按鈕后的效果:
溫馨小提示,進行寫操作時,會清空元素區的所有內容,即此時div的原本內容'<span>猝然臨之而不驚</span>'被全部清除,綜上所訴,寫操作又可以理解為替換:用新值替換舊值
四.innerHTML的一個小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>InnerHtml</title> <style type="text/css"> img{ width: 400px; height: 400px; } </style> </head> <body> <input type="button" value="onclickMe" id="點我"> <div id="box"> </div> </body> </html> <script type="text/javascript"> /*獲取對應元素id*/ var button=document.getElementById('點我'); var box=document.getElementById('box'); var a=1; // 寫操作 button.onclick=function(){ box.innerHTML+='<img src="img'+a+'.jpg" alt=""/>'; // 變換圖片地址為img2.jpg,以此類推 a+=1; // 當a>2時,圖片地址回到原點--重復兩張圖片 if(a>2){ a=1; } }; </script>
解釋一下代碼,一如既往,先獲取input元素和div元素id,進行寫操作賦予了img標簽,可以看到img標簽的屬性值src是通過a來控制在img1.jpg和img2.jpg(我只有這兩張同級別的圖),接着隨a自加1,圖片地址以此類推,當a>2時,a=1-->又回到img1.jpg圖片了
看下初始效果:
這時候沒有進行點擊,也就是沒有進行寫操作,連右邊控制台的div里也是空的
點擊第一次的效果:
寫入了img1.jpg圖片,注意右邊的控制台中div里是不是增加了<img src="img1.jpg" alt="">這行代碼
當我們執行完寫入操作
box.innerHTML+='<img src="img'+a+'.jpg" alt=""/>';
后面的a自加1
a+=1;
圖片地址變換成img2.jpg
這時候點擊第二次,效果:
我要表達的在這:寫操作要注意兩點,一個是會清空原先的所有內容,第二點就是這個例子中,可以寫入元素標簽,你們注意到我在上面寫的img樣式嗎,原因在此,事先控制好圖片大小
喜歡的小可愛雙擊哦!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML屬性</title> <style type="text/css"> #div1{ width: 200px; height: 200px; border: 1px dashed gray; } </style> </head> <body> <span id="spanid">蘭葉春葳蕤,桂華秋皎潔</span> <div id="div1"></div> <input type="button" value="可壞!" onclick="innerhtml();"> <!-- innerHTML屬性 這個屬性不是dom的組成部分,但是大多數瀏覽器都兼容 *第一個作用:獲取文本內容 **第二個作用:向標簽里面設置內容,可以是HTML代碼 --> <script type="text/javascript"> function innerhtml(){ //獲取文本內容 var span = document.getElementById("spanid"); alert(span.innerHTML); //向div中添加表格 div1.innerHTML="<table border=1px><tr><td>明月出天山</td><td>蒼茫雲海間</td></tr><tr><td>長風幾萬里</td><td>吹度玉門關</td></tr>" } </script> </body> </html>
點擊前:
點擊后:
