将输入的内容，添加到文本节点中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../../jquery-3.6.0.js"></script>
<title>Document</title>
<style></style>
<script>
$(function(){
// 事件委托，输入框输入内容了，按钮变成可点击状态
$('body').delegate('.text','propertychange input',function(){
if($(this).val().length>0){
$('.btn').prop('disabled',false);
}else{
$('.btn').prop('disabled',true);
}
})
// 点击按钮，将节点添加到盒子中
$('.btn').click(function(){
var $text=$('.text').val();
var $div=createDiv($text);
$('.box').prepend($div);
$('.text').val('');
})
// 创建节点的方法
function createDiv(text){
var $li=$('<div class=\'content\'>'
+text+'<br>'+formatDate()+'</div>');
return $li;
}
// 创建当前事件的方法
function formatDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
// 将时间放入数组，再转换成字符串
var arr=[year+'-',
month+'-',
day+' ',
hours+':',
minutes+':',
seconds]
return arr.join('');
}
})
</script>
<style>
.text{
width: 300px;
height: 200px;
resize: none;
}
.content{
width: 200px;
border: 1px solid #f00;
margin-bottom: 5px;
}
</style>
</head>
<body>
<textarea class="text"></textarea><br>
<button class="btn" disabled>click</button>
<div class="box"></div>
<div class="content">请在上方输入内容</div>
</body>
</html>