现在的位置: 首页 > 综合 > 正文

innerHTML的使用

2017年01月27日 ⁄ 综合 ⁄ 共 2668字 ⁄ 字号 评论关闭

  

    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>   

抱歉!评论已关闭.