js、jq获取和设置textArea标签的内容-蒲公英云

js、jq获取和设置textArea标签的内容

Myth丶恋晨 2022-03-12 02:22 1238阅读 0赞

<!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>