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. 如果先装framework,后装IIS，想使用ASP.NET

    32位系统在Dos下运行以下命令C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe -i 开始安装 ASP.NET (2.0 ...

  2. Linux命令-chmod、chown和chgrp

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...

  3. node中的socket.io制作命名空间

    如果开发者想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的"/"命名空间就足够了.但是如果开发者需要将应用程序作为第三方服务提供给其他应用程序,则需要为一个用 ...

  4. wkhtmltopdf Windows下 测试demo 成功

    html2pdf 转pdf 中文不换行 然后找到了wkhtmltopdf 支持中文换行 样式也支持 在PHP中生成PDF文件,可以使用 FPDF 和 TCPDF .但是它们只能用于创建简单的表格,当涉 ...

  5. mysqldumpl备份

    mysqldump --databases mydatabase --lock-all-tables --flush-logs mysqldump -h10. -uroot -p密码 --databa ...

  6. Setup FTP server on Ubuntu 14.04

    Setup FTP server on Ubuntu 14.04 Step 1 » Update repositories .krizna@leela:~$ sudo apt-get updateSt ...

  7. C#实现并口输出输入高低电位

    PC并行口各阵脚定义: 1.选通,PC->Printer 2-9 数据(D0-D7) 10.应答(ACK),Printer->PC 11.忙(BUSY),Printer->PC 12 ...

  8. Ubuntu 查看磁盘空间大小命令<转>

    df -h Df命令是linux系统以磁盘分区为单位查看文件系统,可以加上参数查看磁盘剩余空间信息,命令格式: df -hl 显示格式为: 文件系统 容量 已用 可用 已用% 挂载点 Filesyst ...

  9. spring的传播行为和隔离级别

    7个传播行为,4个隔离级别(转自 http://www.blogjava.net/freeman1984/archive/2010/04/28/319595.html) Spring事务的传播行为和隔 ...

  10. 读书笔记 Week7 2018-4-19

    <构建之法> 第十二章 用户体验 读书笔记 首先不得不说,现如今大部分的电脑使用者,都被微软的图形化界面把口味养刁了.当然,包括我自己.无论是在微机原理上级的时候使用那些带着浓郁的上世纪八 ...