JavaScript - 操作元素 - 改变元素内容

最新推荐文章于 2023-02-01 11:42:35 发布

学习中的小菜鸟.

最新推荐文章于 2023-02-01 11:42:35 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/qq_33962481/article/details/118027096

版权

JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

文章目录

一、改变元素内容
二、元素可以不用添加事件
三、innerText 和 innerHTML的区别

一、改变元素内容

element.innerText : 从起始位置到终止位置的内容, 但它去除html标签, 同时空格和换行也会去掉

element.innerHTML : 从起始位置到终止位置的内容, 包括html标签, 同时保留空格和换行.

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        var btn = document.querySelector('button');
        var di = document.querySelector('div');

        btn.onclick = function () {
            di.innerText = getDate();
        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var str = year + '年' + month + '月' + dates + '日';
            return str;
        }
    </script>
</body>

二、元素可以不用添加事件

<body>
    <p>....</p>
    <script>
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var str = year + '年' + month + '月' + dates + '日';
            return str;
        }
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>
</body>

三、innerText 和 innerHTML的区别

innerText不识别html标签
innerHTML识别html标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>...</div>
    <p>...</p>
    <script>
        var div = document.querySelector('div');
        var p = document.querySelector('p');
        div.innerText = '<strong>今天是</strong> 2021年6月18日'
        p.innerHTML = '<strong>今天是</strong> 2021年6月18日'
    </script>
</body>

</html>

最终显示为 :
在这里插入图片描述

这两个属性是可读写的. 可以获取元素里面的内容
- innerText 去除空格和换行

<body>
    <p>
        我是p标签
        <span>123</span>
    </p>
    <script>
        var p = document.querySelector('p');
        console.log(p.innerText);  // 我是p标签 123
    </script>
</body>

- innerHTML : 识别html标准, 不去除空格和换行

<body>
    <div>...</div>
    <p>
        我是p标签
        <span>123</span>
    </p>
    <script>
        var p = document.querySelector('p');
        console.log(p.innerHTML);  // 我是p标签
                                   // <span>123</span>
    </script>
</body>

学习中的小菜鸟.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - 操作元素 - 改变元素内容

文章目录一、改变元素内容二、元素可以不用添加事件三、innerText 和 innerHTML的区别四、修改元素属性一、改变元素内容element.innerText : 从起始位置到终止位置的内容, 但它去除html标签, 同时空格和换行也会去掉element.innerHTML : 从起始位置到终止位置的内容, 包括html标签, 同时保留空格和换行.<body> <button>显示当前系统时间</button> <div>某个
复制链接

扫一扫

专栏目录