JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
2024-09-30 05:30:05
value
value:value是表单元素特有的属性,输入输出的是字符串
如下面的例子,获取到的是他们的value值
<input type="text" id="inP"> <div id="P">
<p>
5566555
</p>
</div>
<button id="btn" value="123">确定</button> <script>
var inP = document.getElementById("inP");
var P = document.getElementById("P");
var btn =document.getElementById("btn");
btn.onclick=function(){
console.log("===========input============")
console.log("value:=="+inP.value); console.log("===========P================")
console.log("value:=="+P.value);
console.log("===========button================")
console.log("value:=="+btn.value); } </script>
input框输入:123456
最后输出如下:
innerHTML/outerHTML
(1) innerHTML设置或获取标签所包含的HTML+文本信息 (从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身)
(2)outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身)
如下图所示
来个栗子吧:
<input type="text" id="inP"> <div id="P">
<p>5566555</p>
</div> <button id="btn" value="123">确定</button> <script>
var inP = document.getElementById("inP");
var P = document.getElementById("P");
var btn =document.getElementById("btn"); btn.onclick=function(){
console.log("===========input============") console.log("innerHTML:=="+inP.innerHTML);
console.log("outerHTML:=="+inP.outerHTML); console.log("===========P================") console.log("innerHTML:=="+P.innerHTML);
console.log("outerHTML:=="+P.outerHTML); console.log("===========button================") console.log("innerHTML:=="+btn.innerHTML);
console.log("outerHTML:=="+btn.outerHTML); }
innerText/outerText
(1) innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身)
innerText 打印标签之间的纯文本信息,会将标签过滤掉,低版本的火狐浏览器不支持,而是支持textContent
(2) outerText设置或获取标签自身及其所包含的文本信息(包括自身)
innerText和outerText在获取的时候是相同效果,
但在设置时,innerText仅设置标签所包含的文本,而outerText设置包含包括标签自身在内的文本
<input type="text" id="inP"> <div id="P"><p>5566555</p></div> <button id="btn" value="123">确定</button> <script>
var inP = document.getElementById("inP");
var P = document.getElementById("P"); var btn =document.getElementById("btn");
btn.onclick=function(){
console.log("===========input============")
console.log("innerText:=="+inP.innerText);
console.log("outerText:=="+inP.outerText); console.log("===========P================")
console.log("innerText:=="+P.innerText);
console.log("outerText:=="+P.outerText);
console.log("===========button================")
console.log("innerText:=="+btn.innerText);
console.log("outerText:=="+btn.outerText);
}
如上图红框所示,innerText和outerText获取值得时候结果是一样的。
inner HTML和innerText的对比
innerText 打印标签之间的纯文本信息
innerHtml 打印标签之间的内容,包括标签和文本信息
<div id="P"><p>5566555</p></div> <button id="btn" value="123">确定</button> <script>
var inP = document.getElementById("inP");
var P = document.getElementById("P"); var btn =document.getElementById("btn");
btn.onclick=function(){
console.log("===========P================")
console.log("innerHTML:=="+P.innerHTML);
console.log("innerText:=="+P.innerText); }
如果将P标签的内容更改如下
inner HTML也会按照原格式进行输出;
结果如下:
尊重原创,转载请注明出处 https://home.cnblogs.com/u/lshdashi/
如有不当之处,请留言指出,谢谢!
最新文章
- windows C input 注意
- PHP生成二维码【谷歌API+qrcode+圆角Logo】
- 基于简单sql语句的sql解析原理及在大数据中的应用
- c#开发微信公众平台
- Vultr新加坡机房速度怎么样?值得购买吗?最新评测!
- POJ-1679 The Unique MST---判断最小生成树是否唯一
- Mybatis接口编程原理分析(一)
- Linux变量键盘读取、数组与声明: read, array, declare
- OnePlus5刷机后一直检查更新
- Linux下1号进程的前世(kernel_init)今生(init进程)----Linux进程的管理与调度(六)
- CODEVS.5037.线段树练习4加强版(分块 区间k的倍数)
- python中字符串格式化
- _ZNote_Qt_Tips_添加动态链接库
- Linux下搭建DNS缓存服务器
- spring3-mvc-maven-hello-world-master mvn jetty:run 及 mvn war:war 指令
- 20165327 2017-2018-2 《Java程序设计》第7周学习总结
- Synergy软件的基本配置/使用(详细教程)
- HDU 1754 I Hate It(线段树区间查询,单点更新)
- Opendaylight的Carbon(碳)版本安装
- 【自动化测试】基于IntelliJ IDEA的Gradle和testNG
热门文章
- Warning:关于_CRT_SECURE_NO_WARNINGS
- (转)RabbitMQ学习之spring整合发送异步消息(注解实现)
- (转) shiro权限框架详解04-shiro认证
- MVC 接收文件
- 图片无损放大软件PhotoZoom分屏预览功能 ,简直好用!
- 软件神器系列——photozoom图片像无损清晰放大软件砸金蛋活动开始啦!
- spring注解@Autowired和@Resource比较
- jenkins 新增节点的3种方式
- find命令扩展
- python装饰器实现登陆验证