javascript中的innerHTML属性有什么作用

墨初学习笔记3331

innerHTML在javaScript中具有双向功能,一是可以从指定的元素对象中获取内容,二是可以把自定义内容插入到指定的元素对象中去。

定义和用法

innerHTML属性用于设置或返回指定标签之间的HTML内容

Object.innerHTML = "HTML";// 设置  var html = Object.innerHTML;// 获取

例1:

QQ截图20180111133840.png

获取ID为mochu的P标签元素中的内容

<html>      <head>      <script type="text/javascript">          function getinnerHTML(){          alert(document.getElementById("mochu").innerHTML);      }      </script>      </head>    <body>      <p id="mochu"><font color="#000">这是获取到的内容!</font></p>      <input type="button" onclick="getinnerHTML()" value="点击" />      </body>  </html>

 

例2:

QQ截图20180111134238.png

向ID为mochu的P标签元素中插入内容

<html>      <head>      <script type="text/javascript">          function setInnerHTML(){          document.getElementById("mochu").innerHTML = "<span>这里是替换的内容包括标签</span>";          }      </script>      </head>    <body>      <p id="mochu"><font color="#000">这里是被替换掉的内容</font></p>      <input type="button" onclick="setInnerHTML()" value="点击" />      </body>  </html>

扩展笔记:

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于: 

1、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。 

2、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。 

3、innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签

代码:

document.getElementById('test').innerHTML.replace(/<.+?>/gim,'')

相关文章

PHP+MySQL网站打开速度的几个因素

PHP+MySQL网站打开速度的几个因素

这几天有客户订制了一款主题,当然这款主题已经在zblog的应用中心开始审核,至于结果怎么样,还请大家关注我的博客。审核通过后,我会在博客里告诉大家一声的。当然本站用的自己写的主题《墨初VIP主题》还在...

jQuery ajax()使用serialize()提交form数据

jQuery ajax()使用serialize()提交form数据

这几天一直在适配用户中心插件,基本的功能也差不多了,时间不长就会上线用户中心,当然适配的过程中也遇到不少的问题,今天记录一下。jQuery的serialize()方法通过序列化表单值,创建URL编码文...

CMS教程域名备案,解析,文件上传

今天说说大淘客CMS的一些事情。一般来说大淘客CMS属于一种小型的个人站点,麻雀虽小,但五脏俱全,对于一些没有接触过网站设计,网站运营的新手来说,难度还是很大的。今天我们说说大淘CMS建站的第二步伐,...

PHP 字符串计算 strlen、strpos 与 strrpos 函数

今天无聊一直逛PHP的论坛,顺便弄点有用的东西保存下来,正好很多时间没有更新博客了,今天说说PHP中一些字符串计算的函数,如果我说的不对,还请大神们在下方的评论处留言,并指正一二。计算字符串的长度或定...

CMS建站教程(一)

CMS建站教程(一)

这一段时间一直在大淘客的官方群里混,看到了很多新手想建立一个基于大淘宝CMS的网站,来推广淘宝,天猫的商品获取一部份佣金。但是对于一个不会建站的新手小白来说,难度是很大的。那么从今天开始,我教大家一步...

500 501 502 503 504 505 详解

500 501 502 503 504 505 详解

服务器会经常的出现错误,那么在平时的时候出现了服务器错误,我们要如何去解决了,今天小编就简单的说说服务器500错误、501错误、502错误、503错误、504错误、505错误的一些问题所在。服务器50...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。