526互联

value、innerHTML、innerText的区别有哪些？

发布时间 2023-07-21 16:06:47作者: herry507

一、innerText：获取指定节点的文本及其后代节点中文本内容，但不能获取<script>和<style>元素中的内容，输入输出的是字符串。

二、value：一般为标签的属性值，追加文本框内容，是表单元素特有的属性,输入输出的是字符串;

三、innerHTML：标签内的文本内容，追加标签和内容，输入输出到该DOM内部纯HTML代码;

* innerHTML与innerText的用法：

1.innerText的用法

    设置标签中的文本内容

  1.  
      <body>
  2.  
        <input type="button" value="按钮" id="btn">
  3.  
        <div id="dv">这是一个div</div>
  4.  
        <script>
  5.  
            document.getElementById("btn").onclick = function () {
  6.  
            document.getElementById("dv").innerText = "改变了";
  7.  
        };
  8.  
    </script>
  9.  
    </body>

    获取标签中的文本内容

  1.  
        <body>
  2.  
        <input type="button" value="按钮" id="btn">
  3.  
        <div id="dv">这是一个div</div>
  4.  
        <script>
  5.  
            document.getElementById("btn").onclick = function () {
  6.  
            var text = document.getElementById("dv").textContent;
  7.  
            console.log(text);
  8.  
        };
  9.  
    </script>
  10.  
    </body>

2.innerHTML的用法

 设置标签中的文本内容

  1.  
         <body>
  2.  
         <input type="button" value="按钮" id="btn">
  3.  
         <div id="dv">这是一个div</div>
  4.  
         <script>
  5.  
            document.getElementById("btn").onclick = function () {
  6.  
            document.getElementById("dv").innerHTML = "改变了";
  7.  
        };
  8.  
    </script>
  9.  
    </body>

获取标签中的文本内容

  1.  
      <body>
  2.  
        <input type="button" value="按钮" id="btn">
  3.  
        <div id="dv">这是一个div</div>
  4.  
        <script>
  5.  
            document.getElementById("btn").onclick = function () {
  6.  
            var text = document.getElementById("dv").innerHTML;
  7.  
            console.log(text);
  8.  
        };
  9.  
    </script>
  10.  
    </body>

3.value的用法（以input标签为例）

对于不同的输入类型，value 属性的用法也不同：

  • type="button", "reset", "submit"       - 在这里表示按钮上显示的文本
  • type="text", "password", "hidden"        - 输入的是字段的初始值
  • type="checkbox", "radio", "image"        - 定义与输入相关联的值