JavaScript实现文本框内容的提交,并保存文本框中的数据

最新推荐文章于 2021-06-04 09:27:56 发布

S_peeding

最新推荐文章于 2021-06-04 09:27:56 发布

阅读量1.2w

点赞数 3

分类专栏：前端JavaScript 文章标签： JavaScript innerText innerHTML

本文链接：https://blog.csdn.net/S_peeding/article/details/102870787

版权

前端JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

将文本框里输入的内容提交到下面列表中显示出来(如图所示)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>提交内容</title>
    <style>
        body,ul{
            margin:0;/*清除默认标签*/
        }
        ul{
            padding-left:0;
            list-style:none;
        }
        textarea{
            display:block;
            width:500px;
            height:200px;
            margin:100px auto 0;
        }
        .btn{
            width:500px;
            margin:10px auto;
            text-align:right;
        }
        .msg{
            margin:0 auto;
            width:500px;
        }
        .msglist{
            line-height:50px;
            border-bottom:1px dashed #ccc;
            text-indent: 2em;/*开头空两个字符*/
        }
    </style>
</head>
<body>
    <textarea cols="30" rows="10"></textarea>
    <div class="btn">
        <button>提交</button>
    </div>
    <ul class="msg"></ul>
    <script>
        let btn=document.querySelector("button"),//获得button元素
            textArea=document.querySelector("textarea"),
            msg=document.querySelector(".msg");
        btn.onclick=function(){
            if(textArea.value){
                msg.innerHTML+="<li class='msglist'>"+textArea.value+"</li>";//将标签信息添加到ul中
                textArea.value="";//清空输入框
            }else{
                alert("你尚未输入信息,请重新输入")
            }
        }
        
    </script>
</body>
</html>

知识回顾

1.value

value是表单元素的特有属性，非表单元素没有value属性，如div，span等.所以获取表单元素的内容时用value属性;
value在不同表单元素里有不同的意义，如button为按钮中的文本，input（text）为默认文本，textarea为默认文本;

2.innerHTLM

用于获取闭合双标签里面的内容，（可以识别标签）;
它是一个字符串，innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签);

3.innerText

innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签);

innerHTML与innerText的区别

innerHTML返回的是标签内的 html内容，包含html标签。

innerText返回的是标签内的文本值，不包含html标签。

S_peeding

关注

3
点赞
踩
45

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现文本框内容的提交,并保存文本框中的数据

将文本框里输入的内容提交到下面列表中显示出来(如图所示)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>提交内容</title> <style> body,ul{ ...
复制链接

扫一扫