18.innerHTML、outerHTML、innerText 、outerText、value

获取:

①innerHTML :属性设置或返回该标签内的HTML。也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
②outerHTML:属性设置或返回该标签及标签内的HTML。也就是从对象的该标签起始到终止位置的全部内容,包括Html标签。
如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,
③inneText:从起始位置到终止位置的内容,但它去除html标签。(只能在IE和chrome下使用)
④outerText 设置(包括标签)或获取(不包括标签)对象的文本
⑤value:属性可设置或返回密码域的默认值。获取文本框的值

html:
<div id='test'>您输入的值是:<span id="aqi-display">尚无录入</span></div>
js:
<script>
var test = e('#test')
console.log('innerHTML', test.innerHTML)
console.log('outerHTML', test.outerHTML)
console.log('innerText', test.innerText)
console.log('outerText', test.outerText)
console.log('value', test.value)
</script>
区别

设置:

备注:innerText 和outerText 在读取得时候是一样的,只是在设置的时候outerText 会连带标签一起替换成目标文本
同理 innerHTML, outerHTML. 只不过它们操作的不是text而是HTML.

原来
点击change_innerText

点击change_outerText
Paste_Image.png
Paste_Image.png

备注:参考 [赵晓盼]
[博客]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,090评论 0 1
  • 也不知什么时候,玛丽苏文兴起,女主倾国倾城,才貌双全,逢凶化吉,全天下都爱她,即便玛丽苏文不少人吐槽,但依旧颇有...
    苏羽墨阅读 250评论 0 0
  • 郭相麟 修身养性 静气袭人 成大事 当大任 慈悲谈笑间……
    郭相麟阅读 128评论 0 0