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. 关于linux网络基础记录

    1.linux操作系统是一套非常稳定的操作系统,作用永不止于提供网络服务那么简单.(www.Mail.FTP.DNS.DHCP.NAT.Router) 2.对于一个服务器而言,“搭建容易维护难”:维护 ...

  2. 原生JS模拟jQuery $

    模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...

  3. OD 实验(十) - 对一个 VB 程序的逆向

    前话: VB 程序用 OD 进行逆向的话,可以先查找相关的变量和字符串,以寻找突破口 变量: __vbaVarTstEq __vbaVarCompEq __vbaVarTstNe __vbaVarCo ...

  4. 小酌Jmeter4.0新版本特性

    1.  首先下载打开jmeter4.0,说一个能感受到的视觉变化,如图, 黑色界面,不少朋友认为做技术黑色的东西看起来高上大一点,虽然这个观念有点肤浅,但似乎也有点道理,毕竟还是有不少朋友热衷于lin ...

  5. DBCA Does Not Display ASM Disk Groups In 11.2

    DBCA Does Not Display ASM Disk Groups In 11.2 https://oraclehowto.wordpress.com/2011/08/15/dbca-does ...

  6. neovim在win10下安装配置

    安装 github安装包地址 在Windows的Pre-built archives下 点击nvim-win64.zip,下载. 解压安装包,放入适合的文件中,比如 D:\Editor中. 双击 nv ...

  7. Zedgraph悬停时显示内容闪烁的解决

    中修改 HandleCursorValues 如下形式即可. // weng modified on 20170531 1016 private Point lastMovedPoint; priva ...

  8. SpringMVC将表单对象序列化成Json字符串提交，以List接收

    出自:http://blog.csdn.net/m0_37595732/article/details/71440853 HTML <%@ page language="java&qu ...

  9. 常用的API接口

    主页 :http://api.36wu.com/ GetWeather(实时气象)API 服务地址:http://api.36wu.com/Weather/GetWeather?city=?;如:ht ...

  10. 4.Hadoop集群搭建之启动

    配置好Hadoop.HDFS.YARN.Zookeeper集群后,需要按照顺序启动. 前期准备 配置好Hadoop.HDFS.YARN.Zookeeper集群 先stop掉所有的hadoop服务 使用 ...