将文本框里输入的内容提交到下面列表中显示出来(如图所示)
<!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"),
textArea
=document
.querySelector("textarea"),
msg
=document
.querySelector(".msg");
btn
.onclick=function(){
if(textArea
.value
){
msg
.innerHTML
+="<li class='msglist'>"+textArea
.value
+"</li>";
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标签。
