先看个例子
<!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">
#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); // <div>我是textarea的内容！</div>
console.log(obj.value); // <div>我是textarea的内容！</div>
console.log('======开始采用value修改textarea内容=======');
obj.value = '<div>我是以value方式赋值的内容！</div>';
console.log(obj.innerHTML); // <div>我是textarea的内容！</div>
console.log(obj.value); // <div>我是以value方式赋值的内容！</div>
console.log('======开始采用innerHTML修改textarea内容=======');
obj.innerHTML = '<div>我是以innerHTML方式赋值的内容！</div>';
console.log(obj.innerHTML); // <div>我是以innerHTML方式赋值的内容！</div>
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属性上面；
