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. perl选项、特殊变量、一些函数参考手册

    perl一行式程序系列文章:Perl一行式 本文用来收集Perl一行式中涉及到的一些选项.特殊变量的说明,可以用来做速查手册. 本文会逐渐更新. 第一次学Perl一行式时,请直接忽略本文内容,并直接从 ...

  2. 解读经典-《C#高级编程》第七版-Chapter1-.Net体系结构-Page13-20

    01 程序集 程序集是包含编译好的.基于.Net Framework的代码逻辑单元.一般来说,在Visual Studio中的一个项目即一个程序集,而一个项目中包含多种不同的代码文件.程序集分为可执行 ...

  3. 反爬虫——使用chrome headless时一些需要注意的细节

    以前我们介绍过chrome headless的用法(https://www.cnblogs.com/apocelipes/p/9264673.html). 今天我们要稍微提一下其中一个细节. 反爬和w ...

  4. 【转载】C#工具类：FTP操作辅助类FTPHelper

    FTP是一个8位的客户端-服务器协议,能操作任何类型的文件而不需要进一步处理,就像MIME或Unicode一样.可以通过C#中的FtpWebRequest类.NetworkCredential类.We ...

  5. T-SQL基础（二）之关联查询

    在上篇博文中介绍了T-SQL查询的基础知识,本篇主要介绍稍微复杂的查询形式. 表运算符 表运算符的作用是把为其提供的表作为输入,经过逻辑查询处理,返回一个表结果.SQL Server支持四个表运算符: ...

  6. 【微服务No.4】 API网关组件Ocelot+Consul

    介绍: Ocelot是一个.NET API网关.该项目针对的是使用.NET运行微服务/面向服务架构的人员,他们需要一个统一的入口进入他们的系统.然而,它可以处理任何说HTTP并在ASP.NET Cor ...

  7. [日常] HTTP连接管理

    HTTP连接管理: 1.误解的Connection首部 当http报文经过中间客户端到服务端中间的各种代理设备时,对标签中列出的头信息进行删除,close是事务结束后关掉此条连接 2.消除串行化的时延 ...

  8. 【Java每日一题】20170303

    20170302问题解析请点击今日问题下方的“[Java每日一题]20170303”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...

  9. php 设计模式之单例模式

    单例模式的关键点 1.//私有构造函数,防止直接new 创建实例 2.//设置静态成员变量 作保存实例 3.//公有访问实例的静态方法 4.//防止克隆对象的方法 上代码: //单例模式 class ...

  10. linux防火墙相关 iptables

    1. root用户查看防火墙状态(非root用户无权限查看) 查看防火墙状态: service iptables status 2.开启和关闭防火墙 //开启防火墙: service iptables ...