【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 )

韩曙亮

发布于 2024-08-09 08:48:24

1440

发布于 2024-08-09 08:48:24

文章被收录于专栏：韩曙亮的移动开发专栏

JavaScript 中可以通过 DOM ( 文档对象模型 ) 操作来修改网页的内容 , 结构 , 样式 , 属性 ;

一、修改元素内容

DOM 提供了如下两种方法 , 可以修改元素内容 ;

innerText 属性 ;
innerHTML 属性 ;

1、innerText 属性修改元素文本内容

通过元素对象的 innerText 属性修改元素内容 :

元素对象的 innerText 属性可以获取或设置元素内的文本内容 ,

使用该属性时 , 会获取元素的当前文本内容 ;
设置该属性时 , 会替换元素的当前文本内容 ;
注意 : 使用该属性 , 会自动删除 HTML 标签 , 也就是说如果有空格或换行 , 会被删除 ;

代码示例 :

document.getElementById("elementId").innerText = "新文本内容";

完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div id="hello">点击下方按钮 , 改变元素内容</div>
    <button id="button">修改元素内容</button>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 1. 获取事件源
        // 使用的是 标签选择器
        var button = document.querySelector('button');
        var div = document.querySelector('div');

        // 2. 绑定事件
        // 要绑定的是事件源 button 的 onclick 点击事件
        // button.onclick 就是要绑定的事件

        // 3. 添加事件处理程序
        button.onclick = function() {
            div.innerText = "已点击 , 使用 innerText 修改元素文本内容"
        }
    </script>
</body>

</html>

执行结果 :

2、innerHTML 属性修改元素 HTML 内容

通过元素对象的 innerHTML 属性修改元素内容 :

元素对象的 innerHTML 属性可以获取或设置元素内部的 HTML 标签元素 , 设置这个属性时 , 实际上是在替换元素内部的 HTML 结构 ;

使用该属性时 , 会获取元素的当前文本的 HTML 内容 ;
设置该属性时 , 会替换元素的当前文本的 HTML 内容 ;
注意 : 使用该属性 , 会自带 HTML 标签 , 也就是说如果有空格或换行会保留下来 ;

代码示例 :

document.getElementById("elementId").innerHTML = "<p>新的HTML内容</p></br>";

完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div id="hello">点击下方按钮 , 改变元素内容</div>
    <button id="button">修改元素内容</button>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 1. 获取事件源
        // 使用的是 标签选择器
        var button = document.querySelector('button');
        var div = document.querySelector('div');

        // 2. 绑定事件
        // 要绑定的是事件源 button 的 onclick 点击事件
        // button.onclick 就是要绑定的事件

        // 3. 添加事件处理程序
        button.onclick = function() {
            div.innerHTML = "<p>已点击</p> 使用 innerHTML 属性</br>修改元素文本内容"
        }
    </script>
</body>

</html>

执行结果 :

执行后的效果如下 : 使用 <p></p> 标签的段落效果 , 使用 </br> 标签的换行效果 , 都设置到了元素内容中 ;

3、页面加载后自动执行修改元素内容的 JS 脚本

上面的代码 , 都是先获取按钮元素 , 然后为按钮元素绑定点击事件 , 点击按钮后修改元素内容 ;

也可以不绑定点击事件 , 直接在 JavaScript 脚本中修改元素内容 ; 参考如下代码 :

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>

</head>

<body>
    <div id="hello">点击下方按钮 , 改变元素内容</div>
    <button id="button">修改元素内容</button>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 页面加载后 , 会自动执行该 JavaScript 脚本

        var div = document.querySelector('div');

        // 该脚本会自动执行
        div.innerHTML = "<p>已点击</p> 使用 innerHTML 属性</br>修改元素文本内容"
    </script>
</body>

</html>

执行结果 :