JavaScript innerHTML

admin發表於2018-09-30
JavaScriptHTML

innerHTML屬性可以設定或者返回指定元素的HTML內容。

此屬性使用頻繁且極為簡單，但是卻很容易給初學者造成一些麻煩。

這一切的麻煩的起源主要在於如何去理解“HTML內容”。

後面會通過程式碼例項詳細做一下介紹。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
htmlContent=domObj.innerHTML

獲取指定元素內的HTML內容。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
domObj.innerHTML=htmlContent

為指定元素設定HTML內容。

瀏覽器相容：

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.opera瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerHTML = "螞蟻部落";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/200018ng7qttsozs797sgg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼應該沒有任何異議，可以將div元素內容設定為"螞蟻部落"。

特別說明：innerHTML屬性是重置元素HTML內容，而不是追加。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerHTML="螞蟻部落";
}
</script>
</head>
<body>
<div id="ant">青島市南區</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/204128f41g7ffarvzfss2r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

再來解決一個問題，文章開頭提到的“HTML內容”表達了怎樣的含義呢。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerHTML = "<b>螞蟻部落</b>";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/200044ukmdhgee2gh6wmgk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到，字串"螞蟻部落"被加粗了。

這是因為賦值給innerHTML的字串都會被當做HTML程式碼解析。

由於標籤<b>具有加粗效果，所以"螞蟻部落"四個字被加粗了。

再來看使用innerHTML屬性返回指定元素的內的HTML內容。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  alert(odiv.innerHTML);
}
</script>
</head>
<body>
<div id="ant"><b>螞蟻部落</b></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/200143j2cwyrcw48rv84bb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼可以彈出div元素中的HTML內容，既然是HTML內容，那自然包括<b>標籤。

如果上面的介紹還不夠清晰，那麼再來對比一下innerText執行效果。

innerText屬性可以返回指定元素內的文字內容，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  alert(odiv.innerText);
}
</script>
</head>
<body>
<div id="ant"><b>螞蟻部落</b></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/11/142428k4phceuul9jwe4n4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼會彈出div元素中的文字內容。

為什麼標籤<b>不算做文字呢，因為<b>會被瀏覽器解析，是對文字的修飾。

相關文章