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. 完美实现 Windows 下网络通信

    编译环境:DEV C++ 配置编译器 Windows 下 实现 Socket 编译需要 ws2_32.lib 这个库的支撑,所以我们编译前应该配置下编译器,具体配置步骤如下: Tools -> ...

  2. 简化开发：Lombok的使用

    Java中优雅的使用Lombok 1.简介 Lombok 是一种 Java实用工具,可用来帮助开发人员消除Java的冗长,尤其是对于简单的Java对象(POJO), 它通过注释实现这一目的.一个标准的 ...

  3. [转]PHP时区/MySql时区/Linux时区

    本文转自:https://blog.csdn.net/watermelonmk/article/details/82669062 问题背景:手头上有个国外的项目,为了所谓的国际化,得将时区修改至[美国 ...

  4. [日常]nginx与网络事件模型

    Nginx 的特点: 1.处理静态文件 2.反向代理加速 3.fastCGI,简单的负载均衡和容错 4.模块化的结构 5.分阶段资源分配技术,使得它的 CPU 与内存占用率非常低,保持 10,000 ...

  5. Python全栈开发之---输入输出与流程控制

    Python简介 python是吉多·范罗苏姆发明的一种面向对象的脚本语言,可能有些人不知道面向对象和脚本具体是什么意思,但是对于一个初学者来说,现在并不需要明白.大家都知道,当下全栈工程师的概念很火 ...

  6. Vue Document

    目录 VUE笔记 环境搭建 Vue学习笔记 1.Vue指令 VUE笔记 环境搭建 node -v npm -v npm i -g cnpm --registry=https://registry.np ...

  7. Eureka开启登录认证

    Eureka服务端配置 一.Eureka的pom.xml 引入spring-boot-starter-security坐标 <dependency> <groupId>org. ...

  8. 二进制安装 kubernetes 1.12(二) - 安装docker, 部署Flannel网络

    在 node 节点上安装 docker 参考 https://www.cnblogs.com/klvchen/p/8468855.html Flannel 工作原理: 部署Flannel网络 在 ma ...

  9. es6 语法 （symbol）

    { // 声明 let a1 = Symbol(); let a2 = Symbol(); console.log(a1 === a2); //false let a3 = Symbol.for('a ...

  10. [工具配置]requirejs 多页面，多入口js文件打包总结

    需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控 ...