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>   

innerHTML的使用的更多相关文章

  1. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  2. innerHTML和innerText的区别

    以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...

  3. textarea 中的 innerHTML 和 value

    <textarea></textarea> <input type="button" value="click" /> &l ...

  4. innerHTML on ie6-9

    https://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx The innerHTML property is read-only on ...

  5. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  6. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  7. c#使用正则表达式抓取a标签的链接和innerhtml

    //读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...

  8. innerHTML 与 innerText 的区别

    innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...

  9. html()、text()、val()、innerHTML、value()的区分

    以上的方法可用于一般的html标签(div)与input中分别进行讨论 1.html(): jQuery方法,用于一般标签中,可读写,可以获得写入html标签. 2.text(): jQuery方法, ...

  10. innerHTML、innerText、outerHTML、outerText的区别

    我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...

随机推荐

  1. 三大主流软件负载均衡器对比(LVS VS Nginx VS Haproxy)

    LVS:1.抗负载能力强.抗负载能力强.性能高,能达到F5硬件的60%:对内存和cpu资源消耗比较低2.工作在网络4层,通过vrrp协议转发(仅作分发之用),具体的流量由linux内核处理,因此没有流 ...

  2. Perl的IO操作(2):更多文件句柄模式

    open函数除了> >> <这三种最基本的文件句柄模式,还支持更丰富的操作模式,例如管道.其实bash shell支持的重定向模式,perl都支持,即使是2>&1 ...

  3. [转]Rancher 快速上手指南操作(1)

    本文转自:http://www.cppblog.com/zhiyewang/archive/2016/03/17/213053.aspx Rancher 快速上手指南操作(1)该指南知道用户如何快速的 ...

  4. WPF Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

  5. Linux-cut命令(22)

    cut剪切命令cut命令通常用来对某个文本文件进行解析,擅长处理以一个字符间隔的文本内容 -b :以字节(bytes)为单位进行分割.这些字节位置将忽略多字节字符边界,除非也指定了 -n 标志. -c ...

  6. C++中的stack类、QT中的QStack类

    C++中的stack 实现一种先进后出的数据结构,是一个模板类. 头文件 #include<stack> 用法(以int型为例): stack <int> s; //定义一个i ...

  7. 4.4 explain 之 possible_keys 、key、key_len

    一.possible_keys 显示可能应用在这张表中的索引,一个或多个. 查询涉及到的字段上若存在索引,则该索引将被列出,但不一定被查询实际使用. 二.key 实际使用的索引.如果为null,则没有 ...

  8. oracle中rownum的使用

    rownum是系统的一个关键字,表示行号,是系统自动分配的,第一条符合要求的数据行号就是1,第二条符合要求的数据行号就是2. Rownum 不能直接使用 例:取前多少条数据: 取中间的一些数据: se ...

  9. 博弈之——SG模板

    很久没搞博弈了.先来写个模板: 现在我们来研究一个看上去似乎更为一般的游戏:给定一个有向无环图和一个起始顶点上的一枚棋子,两名选手交替的将这枚棋子沿有向边进行移动,无法移动者判负.事实上,这个游戏可以 ...

  10. php对二维数据排序

    对于一维数组排序比较简单,像使用sort(),asort(),arsort()等函数进行排序,但是对于二维数组比较麻烦,所有借鉴网上的总结了一下 // 对二维数组进行指定key排序 $arr 二维数组 ...