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

Myth丶恋晨 2022-03-12 02:22 1178阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，1178人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript获取textarea光标选择位置和内容方法(IE, Firefox)

FROM:http://blog.csdn.net/liujin4049/archive/2006/09/19/1244065.aspx 在网上用baidu找

逃离我推掉我的手/ 2022年08月24日 04:06/ 0 赞/ 203 阅读

相关 textarea标签中resize缩放属性的设置

CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple s

╰半夏微凉°/ 2022年08月06日 01:22/ 0 赞/ 300 阅读

相关 jQuery设置和获取span的内容（详解）

先看个示例，示例代码如下： \[html\] view plain copy print ? 1. <html> 2. <head> 3.

今天药忘吃喽~/ 2022年06月05日 07:15/ 0 赞/ 744 阅读

相关 JQ和Js获取span标签的内容

[JQ和Js获取span标签的内容][JQ_Js_span] html: 1 <span id="content">‘我是span标签的内容’</span

秒速五厘米/ 2022年06月05日 07:15/ 0 赞/ 244 阅读

相关正确输出<textarea>textarea>编辑的内容格式

<script type="text/javascript"> $(function () { $(".contentxin")

红太狼/ 2022年06月05日 03:41/ 0 赞/ 234 阅读

相关 textarea的宽度设置成与上级标签一样宽

利用CSS的WIDTH属性，设置成100% <div style="float:left;width:80%;"> <textarea style="width:100

梦里梦外;/ 2022年05月30日 00:41/ 0 赞/ 60 阅读

相关获取p标签的内容

<html> <head> <script type="text/javascript"> function aa() \{ var obj = d

谁借莪１个温暖的怀抱￠/ 2022年05月14日 14:17/ 0 赞/ 279 阅读

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

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Ty

Myth丶恋晨/ 2022年03月12日 02:22/ 0 赞/ 1179 阅读

相关 JQ change事件无法获取textarea标签中内容变化后的值

在项目中碰到使用change事件触发后只能`$(this）.text()`获取到没改变前的值不是改变后的值。可以给`textarea`标签加个`name`属性 v

小咪咪/ 2021年11月08日 20:54/ 0 赞/ 452 阅读

相关 textarea标签IE浏览器下内容不换行

最近在用<textarea></textarea> 标签时发现一个问题，在ie和谷歌浏览器上展示的效果不同，如图：谷歌： IE 浏览器上显示效果

系统管理员/ 2021年01月19日 17:31/ 0 赞/ 740 阅读