innerText 和 innerHTML

作用: 给双标签的元素设置内容/获取双标签里面的内容

不同点:

innerText 只是用于获取文本或设置文本

innerHTML 不仅可以用于设置/获取文本,还可以识别html

相同点:

如果是赋值的话,都会覆盖元素内本身的内容

注意:

  • 这两个是用于双标签的属性

innerText 和 innerHTML的兼容问题

  • innerHTML是非标准属性(非w3c标准),但是所有的浏览器都支持

  • innerText属性存在兼容性问题,早期的火狐浏览器不支持该属性,使用textContent替代

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<input type="text" value ="这是文本框的内容">

<script>

  var input = document.getElementsByTagName('input')[0];

  console.log(input.innerText);

  console.log(input.innerHTML);

  console.log(input.value);

</script>

</body>

</html>

javascript总结37:DOM:innerText 和 innerHTML的更多相关文章

  1. JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  2. 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

  4. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  5. JavaScript处理HTML DOM

    本来只想好好写一篇博文,最后弄到好像重构一样了,越做越不满意,先这样吧:) HTML DOM - JavaScript处理HTML DOM 获取HTML元素 改变HTML元素 增删HTML元素 添加事 ...

  6. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  7. JavaScript文档对象模型(DOM)——DOM核心操作

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口. W3C已经定义了一系列DOM接口,通过这些DOM接口可 ...

  8. JQuery中 text()、html() 以及 val()以及innerText、innerHTML和value

    设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...

  9. JavaScript——BOM和DOM

    什么是BOM bom:浏览器对象模型 什么是DOM dom:文档对象模型 BOM操作: 调用windows浏览器窗口 windows对象可以通过点调用子对象 windows.navigator对象,可 ...

随机推荐

  1. 十八 线程暂停 suspend/ resume

    1  Suspend.resume 的缺点1 :独占!  线程执行到同步块中,如果线程暂停了,不会释放锁. 比如,比如System.out.println()方法就是一个同步方法, 如果线程调用Sys ...

  2. wamp-php 集成环境的基础配置

    域名访问设置(本地局域网) 用记事本打开 127.0.0.1是本地回环地址 配置完后 通过在本地浏览器输入www.0705.com就可以访问本地站点了 Wamp集成环境多站点配置 配置条件: 一个服务 ...

  3. java.lang.ArrayIndexOutOfBoundsException异常分析及解决

    这是一个非常常见的异常,从名字上看是数组下标越界错误,解决方法就是查看为什么下标越界. 下面是一个错误示例: Exception in thread "main" java.lan ...

  4. 在centos7上搭建mongodb副本集

    1.安装副本集介绍 副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的 ...

  5. C 语言 - 逻辑运算和短路求值

    逻辑运算符: 运算符 含义 优先级 ! 逻辑非 高 && 逻辑与 中 || 逻辑或 低 举例: !a:如果 a 为真,!a 为假:如果 a 为 假,!a 为真 a && ...

  6. javascript json数据的处理

    1.前端页面default.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. Python小知识点（3）--装饰器

    (1)装饰器含参数,被装饰函数不含(含)参数 实例代码如下: import time # 装饰器函数 def wrapper(func): def done(*args,**kwargs): star ...

  8. SDN openflow 学习小得

    一.openflow 大概的工作原理 SDN 的一个大概简陋图, 同网段通讯 1.我们传统网络 pc1 10.1.1.1 要找同一子网的 pc2 10.1.1.2  通过广播洪泛.找到pc2,然后转发 ...

  9. javaWeb 开发的成长路线

    感觉最近技术到了一个瓶颈,好长时间没有感觉进步了,本着活到老学到老的态度,笔者就去逛了下,看看前辈们写的文章,觉得他们写的非常不错,在这里特别贴出一张特别值得收藏的图片,不是说其他总结的图片不值得收藏 ...

  10. Git 搭建私有仓库

    简介: 如果你不想把自己的代码公开让别人阅读.使用,也不想花钱购买 GitHub 私有仓库,那么你就需要自己动手做一个了. 当然你也可以使用 Coding.net ,上面可以创建免费的私有仓库.( 今 ...