innerHTML的使用
生活随笔
收集整理的這篇文章主要介紹了
innerHTML的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
inerHTML是html標簽的屬性，成對出現的標簽大多數都有這個屬性，用來設置或獲取位于對象起始和結束標簽
內的HTML。（獲取HTML當前標簽的起始和結束里面的內容）不包括標簽本身。
語法：tablerowObject.innerHTML=HTML
下面的例子返回了表格行的 inner HTML：
<html>
<head>
<script type="text/javascript">
function getInnerHTML() {
alert(document.getElementById("tr1").innerHTML);
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1"><td>Firstname</td><td>Lastname</td></tr>
<tr id="tr2"><td>Peter</td><td>Griffin</td></tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />
</body>
</html>
運行結果:
<td>Firstname</td>
<td>Lastname</td>
注意：innerHTML不可寫為innerHtml或是其他形式，大小寫要嚴格遵守，不然無法獲取或者設置數據。
innerHTML自帶了語法檢查功能,他會自動把不完整的HTML代碼補充完整.運行如下的一個測試代碼就可以發現了.
document.getElementById("AlbumList").innerHTML="<table><tr>";
alert(document.getElementById("AlbumList").innerHTML);
補充說明：
OUTERHTML是把對象本身包含子對象清空,然后在它這個位置插入新的內容,
而INNERTEXT卻是插入文本,當包含有如<等HTML格式符的關鍵字符時,會自動轉義,反正你插入的內容全顯示,而XHTML即當做一段HTML來解釋,HTML格式代碼是不會顯示的,
下面是一個網上朋友弄的不錯的測試,
<html>
<head>
<title>無標題</title>
<head>
<body>
在下面輸入你要替換的內容,文本或HTML
<textarea id=mytext ></textarea>
<input type=button value=innerHTML onclick=myreplace(this.value)>
<input type=button value=innerText onclick=myreplace(this.value)>
<input type=button value=outerHTML onclick=myreplace(this.value)>
<input type=button value=outerText onclick=myreplace(this.value)>
<script language ='javascript'>
<!--
function myreplace(how)
{
if(document.getElementById("show") == null)
document.body.insertAdjacentHTML( 'beforeEnd', "<div id=show title=顯示區域><input value=顯示區域></div>");
switch(how)
{
case "innerHTML":
alert("未使用INNERHTML前的SHOW這個DIV的HTML代碼如下:
" + show.outerHTML);
show.innerHTML = mytext.value;
alert("使用INNERHTML的SHOW這個DIV的HTML代碼如下:
" + show.outerHTML);
break;
case "innerText":
alert("未使用INNERtext前的SHOW這個DIV的HTML代碼如下:
" + show.outerHTML);
show.innerText = mytext.value;
alert("使用INNERtext的SHOW這個DIV的HTML代碼如下:
" + show.outerHTML);
break;
case "outerHTML":
alert("未使用outerhtml前的SHOW這個DIV的HTML代碼如下:注意,用這個后,SHOW對象將不存在
" + document.body.outerHTML);
show.outerHTML = mytext.value;
alert("使用outerHTML的SHOW這個DIV的HTML代碼如下:
" + document.body.outerHTML);
break;
case "outerText":
alert("未使用outertext前的SHOW這個DIV的HTML代碼如下:注意,用這個后,SHOW對象將不存在
" + document.body.outerHTML);
show.outerText = mytext.value
alert("使用outertext的SHOW這個DIV的HTML代碼如下:
" + document.body.outerHTML);
break;
}
}
//-->
</script>
下面為效果顯示區域:
</body>
</html>
總結
以上是生活随笔為你收集整理的innerHTML的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何为新买的笔记本进行全面检测如何检测新
- 下一篇： 测试过程中常见的安全测试漏洞（可手动测试