innerText 与 innerHTML 以及 value 的区别

傷城~ 2023-10-02 21:06 29阅读 0赞

**innerText 与 innerHTML 以及 value 的区别**

## 1.标签对之间是一个值 ##

即：是在< p > < /p >标签中间直接写一个值。

<html>
    	<head><title>innerHTML，innerText,value的区别</title></head>
    	<body>
    		<p id="p1">hello world </p>
    		<script>
    			window.document.getElementById('p1').innerHTML
    			window.document.getElementById('p1').innerText
    			window.document.getElementById('p1').value
    		</script>
    	</body>
    </html>

以上代码运行结果为：

hello world
    				 hello world
    				 undefined

对比下面的代码，在< p >< /p >标签之间再写一个标签

## 2.标签对之间再写一个标签 ##

即：< div>< p >< /p>< /div>

<html>
    	<head><title>innerHTML，innerText,value的区别</title></head>
    	<body>
    		<div id="d1"><p id="p1">hello world </p></div>
    		<script>
    			window.document.getElementById('d1').innerHTML
    			window.document.getElementById('d1').innerText
    			window.document.getElementById('d1').value
    		</script>
    	</body>
    </html>

运行结果为：

< p id="p1">hello world < /p>
    					hello world
    					undefined

经过以上对比，可以总结得到：

### 1.当标签对之间是个文本： ###

innerHTML的结果为：文本值
    		  innerText的结果为：文本值

### 2.当标签对里面还是一个标签对的时候： ###

innerHTML的结果为：里面的整个标签对原封不动
    			innerText的结果为：里面标签对的文本值(没有文本值则为undefined)

### 3.value的值只跟标签是否有value属性有关，若是标签有value属性，那么value值就是value属性的值。没有value属性，那么就是undefined ###

--------------------

建议： \*\*多使用innerHTML,少使用innerText 原因如下：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用 innerHTML，而少用innerText\*\*