javascript中的innerHTML属性有什么作用

墨初学习笔记4268

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,'')

相关文章

2017、喜迎2018,愿大家生活,工作双丰收!

2017、喜迎2018,愿大家生活,工作双丰收!

从博客的开通到今天,屈指算来差不多已经五百多个日夜了,而博客才八十多篇文章,平均下来一个星期才发一篇,而文章的主题大多都是技术型或平时记录的东西。通过这一点才充份的证明自己是一个多么懒的人。现在时间是...

JQ获取某个元素下的所有图片并改变其属性

利用JQ获取某个元素下的所有图片并改变其属性...

这个函数返回的是包含当前函数所有参数的一个数组

这个函数返回的是包含当前函数所有参数的一个数组

在PHP中,系统内置好了很多的函数,在我们写PHP程序的过程中可以调用这些函数,可以极大的减少我们开发程序的时间与精力。当然我们也可以自己写函数,PHP在我们的自定义函数中也有系统内置好的系统函数.....

javascript在指定的元素前或后插入新元素

javascript在指定的元素前或后插入新元素

在前几篇的博文中,我们说了利用appendChild方法可以在DOM文档流中指定的元素后追加利用createElement方法和createTextNode方法创建的新元素,但是appendChild...

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

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

jQuery中的jQuery.noConflict()函数说明

jQuery中的jQuery.noConflict()函数说明

在jQuery库中,几乎所有的插件都被限制在它的命名空间里,通常全局对象都被很好的储存在jQuery的命名空间里,当jQuery与其它的JavaSscript库使用时不会引起冲突一般情况下jQuery...

发表评论    

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