textarea的value和innerHTML

先看个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>测试textarea</title>
<style type="text/css"> <!-- more -->
#textarea {width: 400px; height: 200px;}
</style>
</head>
<body>
<textarea id="textarea"><div>我是textarea的内容!</div></textarea>
<textarea id="textarea2" value="进口量范德萨">够的发生地方</textarea>
<script type="text/javascript">
var obj = document.getElementById('textarea');
console.log(obj.innerHTML); // &lt;div&gt;我是textarea的内容!&lt;/div&gt;
console.log(obj.value); // <div>我是textarea的内容!</div>
console.log('======开始采用value修改textarea内容=======');
obj.value = '<div>我是以value方式赋值的内容!</div>';
console.log(obj.innerHTML); // &lt;div&gt;我是textarea的内容!&lt;/div&gt;
console.log(obj.value); // <div>我是以value方式赋值的内容!</div>
console.log('======开始采用innerHTML修改textarea内容=======');
obj.innerHTML = '<div>我是以innerHTML方式赋值的内容!</div>';
console.log(obj.innerHTML); // &lt;div&gt;我是以innerHTML方式赋值的内容!&lt;/div&gt;
console.log(obj.value); // <div>我是以value方式赋值的内容!</div>
console.log(document.getElementById('textarea2').value); // 够的发生地方
</script>
</body>
</html>

总结

textarea的value和innerHTML总结:

  • innerHTML仅在textarea初始化的时候对value有影响,value的内容就是从innerHTML来的;
  • 除此之外,innerHTML和value没有任何关系,修改value不影响innerHTML,修改innerHTML不影响value;
  • 界面上呈现的永远是value的值,而不是innerHTML,比如通过代码修改innerHTML之后,界面上textarea里面的内容还是value的值;
  • 获取文本框的内容 自始至终都应该读取value
  • value获取的是原始内容,innerHTML获取的内容会自动将<>这2个符号转义;
  • 初始化textarea的内容只能写在<textarea></textarea>的中间,不能像input那样写在value属性上面;