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. 关于调整TimePicker, DatePicker的大小,样式

    最近在做一个时间选择器,想把要DatePicker和TimePicker放在一起使用,无赖他们的大小样式是被Google写死了,找不到相应的属性来设置,自己花了点时间写了一个使用的Demo,运行的效果 ...

  2. module解析过程

    加载一个核心模块时 直接require('模块名')即可 加载一个文件模块时 直接require('绝对路径/相对路径')即可,可省略文件后缀.js. 因为如果文件不存在,将试图找文件名.js的文件 ...

  3. ConcurrentHashMap放入null值报错

    //ConcurrentHashMap源码: /** Implementation for put and putIfAbsent */ final V putVal(K key, V value, ...

  4. 【转】浅析VO、DTO、DO、PO的概念、区别和用处

    原文地址:http://blog.csdn.net/zjrbiancheng/article/details/6253232 概念: VO(View Object):视图对象,用于展示层,它的作用是把 ...

  5. java 红包规则

    java 红包规则 拼手气红包: 规则:最大金额:全部金额/个数*倍数 最小金额:0.01 最后一个红包是全部金额-领取金额 随机分配 package com.utils; import java.m ...

  6. Mysql本地服务器安装

    1.下载并解压 2.新建my.ini my.ini内容如下(路径填写自己的): ------------------------------------------------------------ ...

  7. ARM汇编中值滤波实验

    其实就是 汇编的排序然后选出中位数 排序写的是最直接的冒泡排序,因为简单. 相应的C代码 r2=r0; while(r1<r0){ r1++; r2=r2-; r3=; while(r3< ...

  8. HTTP断点续传下载的原理

    frombegintoend原文HTTP断点续传下载的原理 要实现断点续传下载文件,首先要了解断点续传的原理.断点续传其实就是在上一次下载断开的位置开始继续下载,HTTP协议中,可以在请求报文头中加入 ...

  9. Please specify exact device preset UUID

    Please specify exact device preset UUID 重启RAD IDE,重新选择 IOS Simulator ,iphone 机型!

  10. Nginx 安装与使用

    作者:吴秦出处:http://www.cnblogs.com/skynet/ 前言 nginx Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一 ...