<div id="test">

   <span style="color:red">test1</span> test2

</div>

在JS中可以使用:

1. test.innerHTML:

  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

  上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

2. test.innerText:

  从起始位置到终止位置的内容, 但它去除Html标签

  上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

3. test.outerHTML:

  除了包含innerHTML的全部内容外, 还包含对象标签本身。

  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

 特别说明:

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。

4. test.innerHTML和test.html()的区别

innerHTML是js的原生写法,html()是jquery的写法,

test.innerHTML="<span>Hello</span>";//重新设置test内的html代码。

 $("#test").html("<span>Hello</span>");//重新设置test内的html代码。

ps:最重要的一点是原生js永远比jq快

js中innerHTML和innerText的用法的更多相关文章

  1. js中innerHTML与innerText的用法与区别

    用法: <div id="test">    <span style="color:red">test1</span> te ...

  2. (转)JS中innerHTML,innerText,value

    原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...

  3. JS中innerHTML,innerText,value

    一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...

  4. JS中innerHTML 和innerText和value的区别

    (1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...

  5. JS中innerHTML和innerText,outerHTML和outerText

      innerHTML 声明了元素含有的HTML文本,不包括元素本身的开始标记和结束标记 innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器 ...

  6. js中innerHTML、outerHTML与innerText的用法与区别

    ____________________________________________________________________________________________________ ...

  7. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val()

    一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...

  8. js中substring和substr的用法

    js中substring和substr的用法 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数    ...

  9. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

随机推荐

  1. Java_使用日志

    日志有什么用? 在实际开发中,不可能使用控制台输出所有数据,可以用日志把程序运行的过程记录下来,包括运行中出现的异常和BUG 当出现问题的时候,程序员可以去查看日志,从而能快速的找到问题所在. 一般来 ...

  2. centos6创建用户,设置ssh登录

    创建用户 #创建用户 useradd -s /sbin/nologin mysql useradd –d /usr/china -m china #设置密码 passwd mysql passwd c ...

  3. Java之IO(七)ObjectInputStream和ObjectOutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7003536.html 1.前言 本章介绍Java字节流中重要的成员,对象流ObjectInputStream和O ...

  4. Java之IO(二)BufferedInputStream和BufferedOutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6971234.html 1.前言 本文主要介绍输入输出流中的BufferedInputStream和Buffere ...

  5. 【Git】学习记录

    配置git git config --global user.name "用户名或者用户ID" git config --global user.email "邮箱&qu ...

  6. C# 基元类型

    C#编程中,初始化一个整数有两种方式: (1).较繁琐的方法,代码如下: Int32 a = new Int32(); (2).极简的方法,代码如下: ; 对比两种方法,分析如下: 第一种:过于繁琐, ...

  7. ubuntu生成core转储文件

    1.ulimit -c 判断是否开启转储 为0 则没有开启 2.ulimit -c unlimited 设置转储core大小没有限制 3.设置转储文件位置 echo "/var/core/% ...

  8. springboot自定义错误页面

    springboot自定义错误页面 1.加入配置: @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { re ...

  9. python笔记09-----装饰器,生成器,迭代器

    1.装饰器 定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器的知识储备: 1.      函数即“变 ...

  10. springcloud-01-介绍

    跟随springcloud的一套视频学习springcloud, 把学到的记录下来, 方便自己, 方便别人 IDE: idea 一个父工程, 其他均为module 父工程的依赖: <parent ...