js-innerHtml与innerText的区别

最新推荐文章于 2024-03-17 09:51:08 发布

香格里拉&

最新推荐文章于 2024-03-17 09:51:08 发布

阅读量187

点赞数

分类专栏： JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/Amor__xiaowang/article/details/103970462

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了HTML中DOM操作的基本概念，包括如何使用JavaScript获取元素、修改元素内容以及如何区别使用innerHTML和innerText。通过实例展示了如何利用getElementById方法选择元素，并分别使用innerHTML和innerText属性进行内容的修改。

摘要由CSDN通过智能技术生成

<div id="box">
    我是一个div
    <span>这是一个span标签</span>
</div>
<p>111</p>

<b>123</b>

<script>
    var box = document.getElementById('box');
    console.dir(box);

    /* innerHtml  innerText */
    console.log(box.innerHTML);  //我是一个div <span>这是一个span标签</span>  ///带标签,原文原封不动的输出,包括标签

    console.log(box.innerText);  //我是一个div 这是一个span标签,  ///过滤标签,只输出文本内容

    box.innerHTML = '<b>黑马</b>程序员';  //清空文本内容  -- 标签会生效    黑马程序员  黑马字体加粗了
    // box.innerText = '<b>黑马</b>程序员';//清空文本内容  -- 标签不会生效,内容原封不动的显示,将转义字符变成字符  <b>黑马</b>程序员
</script>