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. Linut ssh sftp服务重启

    在网上,收了半天,终于找到这个,记录一下~哈~ RedHat Linux 重启SSH /etc/init.d/sshd restart 重启SFTP /etc/init.d/vsftpd restar ...

  2. 项目中Map端数据处理不均匀性分析

    Map任务的不均匀性 最近发现Map端数据越来越不均匀,而处理输入的数据,写到本地磁盘的数据量都差不多,我们随便拿出来两个attempt任务(当前map数量为64个),33和45,33的counter ...

  3. Ubuntu16下编译linux内核，报"mkimage" command not found错的解决

    "mkimage" command not found - U-Boot images will not be built /work/system/linux-3.4.20/ar ...

  4. request和response的复习

    客户端发来的请求,服务器将请求封装成request对象,包括请求头和请求的数据等.创建response对象,调用Servlet的Service()方法传递这两个参数,使用HttpServlet就是将这 ...

  5. fiddler的介绍

    一.Fiddler是一个http协议代理工具,主要有以下功能: 1.监控http/https流量.截获http/https请求 2.查看并调试截获到的请求 3.伪造请求与响应 4.测试网站性能 5.解 ...

  6. apache DOCUMENT_ROOT

    问题描述:本地页面错误,+1上正常 本地及+1apache配置 <VirtualHost *:> ServerAdmin webmaster@dummy-host.example.com ...

  7. Centos7 / RHEL 7 双网卡绑定

    http://www.cnblogs.com/hukey/p/6224969.html 1. 简要    双网卡绑定技术在centos7中使用了teaming技术,而在rhel6/centos7中使用 ...

  8. 基于七牛Python SDK写的一个同步脚本

    需求背景 最近刚搭了个markdown静态博客,想把博客的图片放到云存储中. 经过调研觉得七牛可以满足我个人的需求,就选它了. 博客要引用图片就要先将图片上传到云上. 虽然七牛网站后台可以上传文件,但 ...

  9. Django中多种重定向方法使用

    本文主要讲解使用HttpResponseRedirect.redirect.reverse以及配置文件中配置URL等重定向方法 本文使用了Django1.8.2 使用场景,例如在表单一中提交数据后,需 ...

  10. HashMap、HashTable的区别

    HashMap和HashTable都实现了Map接口,但是要用哪个要分清它们之间的区别. 它们的主要区别:线程安全性.速度 HashMap几乎可以等价于HashTable除了HashMap是非sync ...