jQuery HTML / CSS 方法 官方文档 jq - 增加、删除节点例子（一）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.box{
display: flex;
width: 100%;
height: 100%;
}
.container1{
width: 10%;
height: 100%;
background-color: yellow;
}
.container2{
position: relative;
left: 85%;
/*float: right;*/
width: 10%;
height: 100%;
background-color: green;
}
.container3{
position: relative;
right: 10%;
width: 60%;
height: 20%;
background-color: white;
}
.login{
width: 20%;
height: 5%;
position: relative;
top: 20%;
margin-top: 1%;
left: 36%;
}
.container4{
overflow: auto;
margin-top: 10%;
width: 90%;
position: relative;
right: 20%;
height: 50%;
border:2px solid;
}
.content{
width: 100%;
height: 50%;
background-color: paleturquoise;
}
.first{
width: 100%;
height: 20%;
background-color: blanchedalmond;
}
/*.date{
width:100%;
height:50% ;
}*/
</style>
<body>
<div class="box">
<div class="container1"></div> <!--//黄色边-->
<div class="container2"></div> <!--//绿色边-->
<button class="login">立即发表</button>
<div class="box1">
<textarea class="container3"></textarea>
<div class="container4">
<div class="first">
<div class="content">111</div>
<!--<div class="date">2020-2-29</div>-->
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
$(function(){
$("body").on(".container3","input propertychange",function(){
console.log($(this).val());
})
//---------------------------------------------------------------------------------------
$(".login").click(function(){
//val() 方法返回或设置被选元素的 value 属性。输入框里面输入了什么它就返回什么;
//拿到用户输入的内容;
var $text=$(".container3").val();
// 1.2 根据内容创建节点， 把$(text)的内容传入给 crearEles()方法
var $weibo = crearEles($text);
//创建节点的方法;
function crearEles(text){
var $weibo=$("<div class=\'first\'>\n"+
"<div class=\'content\'>"+text+"</div>\n"+
"<div class=\'date\'>\n"+DateTime()+"</div>\n"+
"</div>");
return $weibo;
}
$(".container4").prepend($weibo);
})
})
function DateTime(){
var date=new Date();
//拼接时间
var arr=[date.getFullYear()+"-",
date.getMonth()+2+"-",
date.getDate()+" ",
date.getHours()+":",
date.getMinutes()+" ",
date.getSeconds()+"s"
];
return arr.join('');//数字转化为字符串;
}
</script>
</html>
首先运用盒子布局出该页面
接着运用jquery中的val函数获取用户在输入框中输入的内容，接着创建要发布每一条信息的节点（创建节点方法）function crearEles（text）,在利用prepend方法（要插入到目标元素内部前端的内容）来实现每发布一条信息置顶的效果
