JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
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/
如有不当之处,请留言指出,谢谢!
JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用的更多相关文章
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val()
一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...
- js中innerHTML、outerHTML与innerText的用法与区别
____________________________________________________________________________________________________ ...
- JS中innerHTML,innerText,value
一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...
- (转)JS中innerHTML,innerText,value
原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?
1.innerHTML 属性 (参考自<JavaScript高级程序设计>294页) 在读模式下,innerHTML 属性返回与调用元素的所有子节点(包括元素.注释和文本节点)对应的 HT ...
- js中innerHTML与innerText的用法与区别
用法: <div id="test"> <span style="color:red">test1</span> te ...
- js中innerHTML和innerText的用法
<div id="test"> <span style="color:red">test1</span> test2 < ...
- js中,var 修饰变量名和不修饰的区别
js中 允许在定义变量的时候 不加var 修饰符.js会在当前作用域下寻找上下文是否定义了此变量, 如果没有找到则会为这个变量分配内存.当且将其视为window的成员. 也就是全局变量. 如果加了va ...
- js中return、return true、return false的区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
随机推荐
- oracle 表锁定解锁
Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容.(1)锁表查询的代码有以下的形式:select count( ...
- SVN客户端安装 Linux
1.下载 [maintain@HM16-213 software]$ wget http://subversion.tigris.org/downloads/subversion-deps-1.6.1 ...
- 杭电 2035 人见人爱A^B【同余】
#include<stdio.h> int main() { int a,b; int s; int i; while(scanf("%d %d",&a,&am ...
- Jquery中的bind()方法的一点问题
bind()方法绑定事件的时候,第二个参数是函数,如果代码都写在函数里面,没有任何问题.但是,直接调用外部封装的函数需要注意,出错的例子: <!doctype html> <html ...
- spring cloud(一) 副 consul
spring cloud 使用consul作为注册中心 1.安装consul 使用docker安装 查找consul镜像 docker search consul 下载镜像 docker pull c ...
- nginx (待更新)
install apt install nginx 默认在 /etc/nginx 目录下 一个 master 以及多个 worker 3504 root 20 0 141M 7196 5552 S 0 ...
- 《黑白团团队》第八次团队作业:Alpha冲刺 第四天
项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第四天 日期:2019/6/18 成员 ...
- OOP 面向对象 七大原则 (一)
OOP 面向对象 七大原则 (一) 大家众所周知,面向对象有三大特征继承封装多态的同时,还具有这七大原则,三大特征上一篇已经详细说明,这一篇就为大家详解一下七大原则: 单一职责原则,开闭原则,里氏 ...
- 利用LoadRunner来进行文件下载的测试
小强创立的“三级火箭”学习方式 1.参加培训班,即报名缴纳学费后,拉入专属QQ群,由老师亲自上课进行讲解,课后仍提供视频 性能测试培训班招生中,报名与咨询QQ:2083503238 python自动化 ...
- FactoryBean简介
网上看了很多关于FactoryBean和BeanFactory的介绍,总感觉说的不够简单.直白,今天用自己的语言来描述下,如果有不对的地方,还请大家指正. 1. FactoryBean和BeanFac ...