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

2024-08-09 08:48:24 浏览数 (5)
JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ;

一、修改元素内容

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

  • innerText 属性 ;
  • innerHTML 属性 ;

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

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

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

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

代码示例 :

代码语言：javascript复制
document.getElementById("elementId").innerText = "新文本内容";

完整代码示例 :

代码语言：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 脚本

        // 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 标签 , 也就是说如果有 空格 或 换行 会保留下来 ;

代码示例 :

代码语言：javascript复制
document.getElementById("elementId").innerHTML = "<p>新的HTML内容</p></br>";

完整代码示例 :

代码语言：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 脚本

        // 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 脚本中修改元素内容 ; 参考如下代码 :

代码示例 :

代码语言：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>

执行结果 :

web 事件 javascript html innerhtml

1 人点赞