<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../extends/jquery/jquery.min.2.1.4.js"></script>
    <title>获取和设置textArea的内容</title>
</head>
<body>
    <textArea rows="5" id="test">你好好呀</textArea>
    <button onclick="change()"  class="btn btn-info">点击改变</button>
</body>
</html>

js获取textArea的内容:通过 element.innerHTML  或  element.value 获取值(注:element.innerText获取不到内容);

jq获取textArea的内容:通过 .val()、.html()、.text()都可以获取到值。

<script type="text/javascript">
    /** js获取 */
    var test = document.getElementById("test");
    var text1 = test.innerHTML; //方法1
    var text2 = test.value; //方法2
    //注,innerText是获取不到值的
 
    /** jq获取 */
    var text3 = $("#test").val();   //方法1
    var text4 = $("#test").text();  //方法2
    var text5 = $("#test").html();  //方法3
</script>

js设置textArea的内容:

<script type="text/javascript">
    function change(){
        /** js设置 */
        var test = document.getElementById("test");
        test.innerHTML = "你好,地球!"; //方法1
        test.value = "你好,中国!"; //方法2
        test.innerText = "绿色地球!"; //方法3
 
        /** jq设置 */
        $("#test").html("你好、我好、大家好!");  //方法1
        $("#test").val("幸福的日子");  //方法2
        $("#test").text("html好学");  //方法3
    }
</script>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注