1.innerHTML属性和innerText属性

  都是对元素的一个操作,简单讲,innerHTML可以在某种特定环境下重构某个元素节点的DOM结构,innerText只能修改文本值

  在JavaScript高级程序设计(第三版)是这样描述的:

    在只读模式下,innerHTML返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。

    

<div>
  这是一个div标签
  <div>这里又是一个div标签</div>
</div> var div = document.getElementsTagName("div")[0]; console.log(div.innerHTML); // 这是一个div标签<div>这里又是一个div标签</div> console.log(div.innerText);  
//这是一个div标签
//这里又是一个div标签

    结果显而易见,innerHTML会返回一个带标签的值,innerText只会返回文本值,如果有换行,也会返回换行。

    在写入模式下,innerHTML会根据指定的值创建新的DOM树,替换掉调用元素的所有子节点。

<div>
  这是一个div标签
  <div>这里又是一个div标签</div>
</div> var div = document.getElmentsByTagName('div')[0]; div.innerHTML = "<a href="#">我是一个链接</a>";
div.innerText= "<a href="#">我是一个链接</a>";
//设置innerHTML后div结构变成
<div><a href="#">我是一个链接</a></div> //设置innerText后div结构变成
<div><a href="#">我是一个链接</a></div>
这是的a只是纯文本,在页面上只是文字,并没有渲染成a元素

  

  技巧分享: 当需要添加的innerHTML为DOM结构另一个元素的文本内容时,可以使用下面的操作

this.innerHTML = documen.body.innerHTML.replace(/<.+?>/gim,'');

//去掉标签

Js—innerHTML和innerText的区别的更多相关文章

  1. innerHTML和innerText的区别,以及select元素中怎么取出被选中的option。

    一.innerHTML和innerText的区别. 元素.innerHTML = 字符串,是将一对或一个标签所标识的内容全部替换为所赋予的字符串,如果字符串中有标签,浏览器将自动识别其中的标签. 元素 ...

  2. innerHTML和 innerText的区别

    共同点:innerHTML和innerText都会把元素内内容替换掉.不同点:1,innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHT ...

  3. DOM中的outerHTML,innerHTML,outerText,innerText的区别

    --转自http://blog.163.com/yw_0721/blog/static/7164579720102932157759/ 简单的说innerHTML和outerHTML.innerTex ...

  4. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  5. innerHTML和innerText的区别

    以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...

  6. innerHTML 与 innerText 的区别

    innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...

  7. innerHTML与innerText的区别

    innerHTML获取元素的HTML内容,和设计元素的HTML内容(HTML标签会被解析)例如:ele.innerHTML="<strong>我会被解释加粗</strong ...

  8. innerhtml outhtml innerText outText 区别

    innerHTML获取标签内的HTML outerHTML获取标签及标签内的HTML innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标 ...

  9. innerHTML与innerText的区别: 前者获取的是dom对象内的所有html元素 后者获取的是dom对象里面的纯文本元素

随机推荐

  1. 《天龙八部》及Ogre3D模型的3ds max导入插件(源码公布)

    測试UE4项目.苦于没有像样的模型和动画资源,所以想到把<天龙八部>等网游的资源导出来用. 于是做了个max导入插件. 效果还是不错的. 效果图: 上图是<斗破苍穹>的游戏资源 ...

  2. LeetCode 804. Unique Morse Code Words (唯一摩尔斯密码词)

    题目标签:String 题目给了我们 对应每一个 字母的 morse 密码,让我们从words 中 找出 有几个不同的 morse code 组合. 然后只要遍历 words,把每一个word 转换成 ...

  3. Unity游戏小地图生成

    孙广东  2015.6.25 这个在AssetStore上有几个不错的插件, 除了知道原理,能自己实现还是好的. 非常多插件是不会直接使用的.而是要依据自己项目的需求进行改动或者就是自己写. 那么我们 ...

  4. Spring -> Spring Boot > Spring Cloud

    这几天刚刚上班,公司用的是Spring Cloud,接触不多.我得赶快学起来. 想学习就必须得知道什么是微服务,什么是Spring Boot,什么是Spring Cloud,以及两者之间有什么关系? ...

  5. 字典(Trie树)

    4189 字典  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master     题目描述 Description 最经,skyzhong得到了一本好厉害的字典,这个 ...

  6. join()和fromkeys()的用法与注意事项

    join()和fromkeys()的用法与注意事项 1.join()的用法与注意事项: join()可以使用集合,列表,字符串的子元素,拼接,下面介绍用法: str.join(data) 2.from ...

  7. Java中的自定义注解

    ## 元注解 要声明一个注解, 我们需要元注解, 元注解是指注解的注解,包括@Retention, @Target, @Document, @Inherited. @Retention 注解的保留位置 ...

  8. jmeter中beanshell断言的使用

    简单使用beanshell的内容,进行测试内容的判断 这里通过断言内容,修改if的条件,达到发送警报邮件的功能 beanshell 代码如下:     SampleResult 等效于 prev lo ...

  9. BZOJ 3514 LCT+主席树

    思路: //By SiriusRen #include <bits/stdc++.h> using namespace std; ; ],fa[N],minn[N],rev[N],q[N] ...

  10. Ubuntu下搭建repo服务器(二): 配置git-daemon-run

    git-daemon-run实际是一个脚本管理工具,用来启动git-daemon. 1 安装git-daemon-run(A端) apt-get install git-daemon-run 2. 配 ...