JavaScript实现文本框内容的提交,并保存文本框中的数据 |
您所在的位置:网站首页 › js清空li中的文本 › JavaScript实现文本框内容的提交,并保存文本框中的数据 |
将文本框里输入的内容提交到下面列表中显示出来(如图所示)
提交内容
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;/*开头空两个字符*/
}
提交
let btn=document.querySelector("button"),//获得button元素
textArea=document.querySelector("textarea"),
msg=document.querySelector(".msg");
btn.onclick=function(){
if(textArea.value){
msg.innerHTML+=""+textArea.value+"";//将标签信息添加到ul中
textArea.value="";//清空输入框
}else{
alert("你尚未输入信息,请重新输入")
}
}
知识回顾
1.value
value是表单元素的特有属性,非表单元素没有value属性,如div,span等.所以获取表单元素的内容时用value属性; value在不同表单元素里有不同的意义,如button为按钮中的文本,input(text)为默认文本,textarea为默认文本; 2.innerHTLM用于获取闭合双标签里面的内容,(可以识别标签); 它是一个字符串,innerHTML可获取或设置指定元素标签内的 html内容,从该元素标签的起始位置到终止位置的全部内容(包含html标签); 3.innerTextinnerText可获取或设置指定元素标签内的文本值,从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签); innerHTML与innerText的区别 innerHTML返回的是标签内的 html内容,包含html标签。 innerText返回的是标签内的文本值,不包含html标签。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |