博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
innerHTML outerHTML innerText value 区别
阅读量:6196 次
发布时间:2019-06-21

本文共 1345 字,大约阅读时间需要 4 分钟。

定义

  • innerHTML: 属性设置或返回表格行的开始和结束标签之间的 HTML。(也就数说,用innerHTML的元素必须是标签对的形式,也就是input啥都输不出来)
  • outerHTML: 设置或获取对象及其内容的 HTML 形式。(标签对,input输出本身)
  • innerText: 设置或获取位于对象起始和结束标签内的文本。(标签对,input啥也输不出来)
  • value 这个用的地方比较多,这里仅以input中的value为例。就是input的值。(标签对,输出undefined)

代码

1 2     3         text4         5     6 
1 var outer = document.getElementById('outer'); 2 var mid = document.getElementById('mid'); 3 var inner = document.getElementById('inner'); 4 var input = document.getElementById('input'); 5  6 console.log('outer的value是' + outer.value); 7 console.log('outer的innerHTML是' + outer.innerHTML); 8 console.log('outer的outerHTML是' + outer.outerHTML); 9 console.log('outer的innerText是' + outer.innerText);10 11 console.log('mid的value是' + mid.value);12 console.log('mid的innerHTML是' + mid.innerHTML);13 console.log('mid的outerHTML是' + mid.outerHTML);14 console.log('mid的innerText是' + mid.innerText);15 16 console.log('inner的value是' + inner.value);17 console.log('inner的innerHTML是' + inner.innerHTML);18 console.log('inner的outerHTML是' + inner.outerHTML);19 console.log('inner的innerText是' + inner.innerText);20 21 console.log('input的value是 ' + input.value);22 console.log('input的innerHTML是' + input.innerHTML);23 console.log('input的outerHTML是' + input.outerHTML);24 console.log('input的innerText是' + input.innerText);

结果

 

转载于:https://www.cnblogs.com/caiyanhu/p/6971467.html

你可能感兴趣的文章
使用JSDoc提高代码的可读性
查看>>
互联网行业高弹性系统构建最佳实践
查看>>
基于 three.js 的 3D 粒子动效实现
查看>>
flink1.7.2 tableapi批处理示例
查看>>
公司网站被黑 跳转到彩票网站的处理解决办法
查看>>
正则表达式 命名捕获组
查看>>
天际汽车牛胜福:受感知系统等影响 点对点L3将于五年后实现
查看>>
mysql备份与恢复
查看>>
TensorFlow on Kubernetes性能瓶颈定位
查看>>
iOS实现Crash捕获与堆栈符号化
查看>>
最全React技术栈技术资料汇总(收藏)
查看>>
k8s与CICD--利用helm部署应用到kubernetes
查看>>
阿里云图数据库GraphDB上线,助力图数据处理
查看>>
阿里云MVP:开发者的超能力,用技术创造更好世界
查看>>
不要争了!技术选择没那么重要
查看>>
如何提高SEO页面与用户检索的相关性?
查看>>
磁盘阵列 关于Raid0,Raid1,Raid5,Raid10
查看>>
戴尔新专利:一台笔记本,两个可拆卸屏,你怎么看?
查看>>
async
查看>>
c#如何获得ModelVisual3D中MeshGeometry3D对象
查看>>