文章目录
  • 一、修改元素内容
  • 1、innerText 属性修改元素文本内容
  • 2、innerHTML 属性修改元素 HTML 内容
  • 3、页面加载后自动执行修改元素内容的 JS 脚本


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






一、修改元素内容


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

  • innerText 属性 ;
  • innerHTML 属性 ;


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




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

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

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

代码示例 :

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

完整代码示例 :

<!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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.

执行结果 :

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



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



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

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

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

代码示例 :

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

完整代码示例 :

<!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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.

执行结果 :

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

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

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



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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

执行结果 :

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