javaScript和jQuery获取、设置textarea标签的内容（取值和赋值）
昨天晚上在写代码的时候前端遇到一个bug，在js取值textarea中，我使用了getElementById方法对textarea标签取值，但不论如何取值，始终无法成功取到页面上输入的值并进行Ajax请求，一开始以为是ajax与后端接口之间数据传输出问题了，后来经过排查，就是对于textarea标签取值失败的问题，于是上网查阅了一下资料。
下面是我的错误源码
function addComment(){ //后端需要参数 Integer postId,Comment comment,HttpSession httpSession // 创建一个URLSearchParams对象并传入URL var params = new URLSearchParams(window.location.search); // 获取id参数值 var id = params.get('id'); var commentDTO = { //就是下面这行取值发生了错误 text:document.getElementById("addComment"), }; $.ajax({ url:"http://localhost:8080/addComment/"+id, type:"POST", data: JSON.stringify(commentDTO), contentType:"application/json", //session xhrFields:{ withCredentials:true }, success:function (data){ if (data.code===0){ if (data.msg==="新增成功"){ alert(data.msg); }else if (data.msg==="新增失败,请联系管理员查看原因"){ alert(data.msg); } }else if (data.msg){ alert(data.msg); } } }) }
对于标签textarea 的取值，顺便整理一下它的取值和赋值。
HTML部分：
<textarea id="text" name="" id="" cols="30" rows="10"></textarea> <button id="btn">提交</button>
javaScript 获取 textarea 的值
通过 element.value 和 element.innerHTML 获取， .value 亲测有效。
js 代码如下：
<script> var text = document.getElementById("text"), btn= document.getElementById("btn"); btn.onclick = function () { var info = text.value;//方法一 var info = text.innerHTML;//方法二 console.log(info); } </script>
jQuery 获取 textarea 的值
textarea 是表单元素，所以 val() 可用；它又是闭合标签，所以 html() 和 text() 可用。
js 代码如下：
var info = $("#text").val();//方法1 var info = $("#text").text();//方法2 var iiinfo = $("#text").html();//方法3
textarea 的赋值
//javaScript赋值 text.innerHTML = "你好，地球！";//方法一 text.value = "你好，中国！";//方法二 text.innerText = "绿色地球！";//方法三 //jq赋值 $("#text").html("你好、我好、大家好！");//方法1 $("#text").val("幸福的日子");//方法2 $("#text").text("html好学");//方法3
jQuery不同方式下的取值也有所不同
1.我们通过给textarea元素设置id，通过id查找到元素获取val的方式行不通。详情见代码。具体原因还未查找到，有了解的码友请指点一二。
2.通过jQuery的选择器查找到元素，通过.val()的方法可以获取到初始的textarea的内容，也可以获取到修改以后的textarea的内容。
3.通过jQuery的选择器查找到元素，通过.text()的方法只能获取到初始的textarea的内容。
4.通过jQuery的选择器查找到元素，通过.html()的方法只能获取到初始的textarea的内容。
总结：
- 通过jQuery获取textarea新输入的内容时，需要使用筛选器和.val()组合进行获取。（常用）
- 通过jQuery获取textarea默认的内容时，需要使用筛选器和.text()组合进行获取或使用筛选器和.html()组合进行获取。
代码段如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取textarea内容</title> </head> <body> <div class="title"> <span class="xinghao">*</span> 内容描述 </div> <textarea name="remark" id="remark" rows="8" placeholder="请您输入作品概述" class="content">123456</textarea> <div class="btn-container" onclick="onSubmte()">获取textArea内容</div> </body> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script> function onSubmte() { console.log("remark:", $("#remark").val()) //remark: undefined console.log("remark:",$("textarea[name=remark]").val()) // remark: 123456 console.log("remark:",$("textarea[name=remark]").text()) // remark: 1234 console.log("remark:",$("textarea[name=remark]").html()) // remark: 1234 } </script> </html>
