innerHTML和innerText区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    这是一个div
    <p>这是一个p标签</p>
</div>
<script>
    var box = document.getElementById('box');
    console.dir(box);

    // innerHTML innerText获取开始标签和结束标签之间的内容
    // innerHTML获取内容 会把内容的标签一起获取到，且原封不动
    //innerText 获取过滤html后的文本内容，且过滤前后换行和空白
    console.log(box.innerHTML);
    console.log(box.innerText);
    //通过innerHTML设置标签之间的内容，如果标签中带有标签，会以html的方式解析
    // box.innerHTML = ''; //清空内容
    // box.innerHTML = '<b>你好</b>';
    //通过innerText设置标签之间的内容，如果标签中带有标签，会原封不动展示出来
    box.innerText = '<b>你好</b>';

</script>
</body>
</html>

posted on 2021-03-15 20:25 ellaha 阅读(94) 评论(0) 收藏举报

刷新页面返回顶部