innerHTML的使用

来源：互联网发布：单片机外围电路经典书编辑：程序博客网时间：2024/06/05 20:36
    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   style="width:100;   height:200"></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代码如下:\n"   +   show.outerHTML);                     show.innerHTML   =   mytext.value;                     alert("使用INNERHTML的SHOW这个DIV的HTML代码如下:\n"   +   show.outerHTML);                     break;                 case   "innerText":                     alert("未使用INNERtext前的SHOW这个DIV的HTML代码如下:\n"   +   show.outerHTML);                     show.innerText   =   mytext.value;                     alert("使用INNERtext的SHOW这个DIV的HTML代码如下:\n"   +   show.outerHTML);                     break;                 case   "outerHTML":                     alert("未使用outerhtml前的SHOW这个DIV的HTML代码如下:注意,用这个后,SHOW对象将不存在\n"   +   document.body.outerHTML);                     show.outerHTML   =   mytext.value;                     alert("使用outerHTML的SHOW这个DIV的HTML代码如下:\n"   +   document.body.outerHTML);                     break;                 case   "outerText":                     alert("未使用outertext前的SHOW这个DIV的HTML代码如下:注意,用这个后,SHOW对象将不存在\n"   +   document.body.outerHTML);                     show.outerText   =   mytext.value                     alert("使用outertext的SHOW这个DIV的HTML代码如下:\n"   +   document.body.outerHTML);                     break;           }       }     //-->     </script>     下面为效果显示区域:     </body>     </html>
0 0