innerHTML,innerText,value的区别(实例)

1. 获取标签的内容

•    innerHTML识别标签, 获取双标签内的内容, 包含内容里的嵌套标签 [高版本的浏览器会将格式原样打印];
•    innerText 不识别标签,  在获取标签内容时去除所有标签
•    value获取标签的value属性值

实例如下:

   解析:

   (1) 控制台的打印内容中, 第一段(以虚线划分) 使用innerHTML获取到

标签内的所有内容,包括

标签对和标签; 笔者使用浏览器版本较新,按照代码格式输出标签内容;

   (2) 第二段为使用innerText获取的

标签中去除标签的其他内容, 无格式,直接输出. 此外, 标签为不是标签对, 内容也不识别;

   (3) 第三段是使用value获取的标签的value属性.

2. 修改标签内容

• 使用innerHTML,相当于给标签中加入HTML代码;
• 使用innerText,相当于给标签中加入文本内容;
• value相当于修改控件显示内容

实例:

解析:

(1) 使用innerHTML添加的识别标签,

我是新加入的

是一个标签对,在浏览器上显示时显示的是"我是新加入的"; "hi"是文本,二者根据是否有标签对进行区分;

(2)使用innerText添加的内容为纯文本,添加什么内容都作为

标签内的文本, 浏览器上直接打印出来,不识别

标签;

(3) 使用value添加的内容直接改变了控件显示的文本内容,至于为什么控制台上打印的input标签的value值未改变,在下暂时不清楚. 等待大神解答.

notes: innerText不是W3C标准定义的语句,innerHTML才是,如果需要实现获取的内容不包含标签,可以通过添加正则表达式的方法实现,正则表达式参考链接:http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

笔者还是个初学者. 如有理解偏差,请诸位大神不吝赐教,多谢多谢~~~