你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

javascript中的innerHTML属性有什么作用

2018-01-14JS/JQ墨初825°c
A+ A-

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,'')
  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
javascript中的innerHTML属性有什么作用

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录