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. 第十一章： Hadoop核心架构HDFS+MapReduce+Hbase+Hive内部机理详解

    HDFS的体系架构 整个Hadoop的体系结构主要是通过HDFS来实现对分布式存储的底层支持,并通过MR来实现对分布式并行任务处理的程序支持. HDFS采用主从(Master/Slave)结构模型,一 ...

  2. 关于模拟admin实现stark组件的知识点

    一. url知识 还记得include分发么?里面的参数都可以有些什么? urlconf_module本质是返回的是模块路径对象 def include(arg, namespace=None, ap ...

  3. javascript数组的申明方式以及常用方法

    数组的定义: 方法1. var mycars=new Array()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]=&qu ...

  4. 由 MySQL server 和 mysql-connector 版本的不匹配引发的一场惊魂

    剧情还原 今天原计划给领导演示一个小Demo, 昨天在自己机器上调通OK以后就下班了... 今天上午早会后,领导说 “昨天,我让我们IT同事把新的测试环境搭建好了,XXX 你把要演示的Demo部署到上 ...

  5. OD 实验(二十) - 对反调试程序的逆向分析(一)

    程序: Keyfile.dat 里的内容 该文件中要至少有 9 个 ReverseMe.A: 运行程序 用 OD 打开该程序,运行 弹出的是错误的对话框 该程序发现 OD 对它的调试,所以该程序对 O ...

  6. ubuntu下安装和配置最新版JDK8傻瓜教程

    ubuntu下安装和配置最新版JDK8傻瓜教程 听语音 | 浏览:18940 | 更新:2014-07-14 22:13 | 标签:ubuntu 1 2 3 4 5 6 分步阅读 ubuntu系统通常 ...

  7. linux find中的-print0和xargs中-0的奥妙

    默认情况下, find 每输出一个文件名, 后面都会接着输出一个换行符 ('n'), 因此我们看到的 find 的输出都是一行一行的: 比如我想把所有的 .log 文件删掉, 可以这样配合 xargs ...

  8. SpringMVC配置过程中出现的问题！

    <c:set var="ctx" value="${pageContext.request.contextPath}" />不起作用,原因是web. ...

  9. Django 学习之---缓存系统

    一.浏览器缓存机制 Cache-control策略(重点关注) Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务 ...

  10. Windows Intel VT-x开启

    解决虚拟机安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题 背景:win7 旗舰版 64位+VMware 10.0 启动虚拟机时报错 问题:已将该虚拟机 ...