推荐在写动态生成标签数据的时候，提前写一遍html+css的结构，方便提供写照模板

<div class="box"><!-- 顶部搜索框 --><div class="inputBox"><textarea maxlength="200"></textarea></div><!-- 按钮区域 --><div class="btn"><div class="btns"><span class="num1">0</span><span class="num2">/200</span><input type="button" value="发布"></div></div><!-- 内容区域 --><div class="content"><!--<div class="item"><div class="leftIMg"><img src="img/01.jpg" alt=""></div><div class="rightImg"><p>阿道夫</p><p>2022-03-15</p><p>不错哦</p></div></div> --></div></div>

	<style>* {margin: 0;padding: 0;border: 0 none;}.box {width: 980px;margin: 50px auto;}.inputBox {width: 100%;height: 80px;}.inputBox textarea {border: 1px solid #ccc;outline-style: none;width: 100%;height: 100%;box-sizing: border-box;resize: none;border-radius: 10px;padding: 20px;}.btn {overflow: hidden;}.btns {float: right;margin: 10px 0;height: 40px;}.btns input {width: 240px;height: 40px;color: #fff;background-color: skyblue;outline-style: none;cursor: pointer;}.content {width: 100%;}.item {width: 100%;border-bottom: 1px solid #ccc;padding-top: 10px;padding-bottom: 10px;overflow: hidden;}.leftIMg {float: left;width: 100px;}.leftIMg img {width: 100%;}.rightImg {float: left;margin-left: 10px;line-height: 30px;}</style>

	<script type="text/javascript">//1.获取用户输入字数var input = document.querySelector('.inputBox textarea');var num = document.querySelector('.num1');input.oninput = function() {num.innerHTML = this.value.length;}//2.点击发布按钮var btn = document.querySelector('.btns input');btn.onclick = function() {//3. 动态创建div 类名叫itemvar div_1 = document.createElement('div');div_1.className = 'item';//4. 动态创建左侧图片var div2 = document.createElement('div');div2.className = 'leftIMg';//将图片的随机获取函数添加到div2中div2.innerHTML = '<img src='+getImg()+'>';//5. 动态创建右侧内容var div3 = document.createElement('div');div3.className = 'rightImg';//将姓名随机函数、时间函数添加到创建的div3中，并同时加上表单中的value内容div3.innerHTML = '<p>'+getName()+'</p><p>'+getTime()+'</p><p>'+input.value+'</p>';//6. 添加到div_1div_1.appendChild(div2);div_1.appendChild(div3);//7.添加到第一个var content = document.querySelector('.content');content.insertBefore(div_1, content.firstElementChild);}//设置两个数组，一个保存姓名，一个保存图片var names = ['阿甘', '特朗普', '萌妹子', '屌丝男士', '极品女士', '二狗子', '鸡腿子', '肉肉'];var imgs = ['img/01.jpg', 'img/02.jpg', 'img/04.jpg', 'img/06.jpg', 'img/09.jpg', 'img/14.jpg', 'img/17.jpg'];//设置一个随机数字的函数function getRandom(n, m) {//随机数字的函数结构：return Math.floor(Math.random() * (m - n + 1) + n);}//设置一个图片获取的随机函数function getImg() {//此处调用随机数的函数，并赋值实参return imgs[getRandom(0, imgs.length-1)]; //0到数组的长度减1}//设置一个姓名获取的随机函数	function getName () {//此处调用随机数的函数，并赋值实参return  names[getRandom(0, names.length-1)];//0到数组的长度减1}//设置一个时间函数function getTime() {var d = new Date();var y = d.getFullYear();var m = d.getMonth() + 1;m = m >= 10 ? m : '0' +m;var d1 = d.getDate();d1 = d1 >= 10? d1 : '0' + d1;var h = d.getHours();h = h >= 10 ? h : '0' + h;var m1 = d.getMinutes();m1 = m1 >= 10? m1 : '0' + m1;var s1 = d.getSeconds();s1 = s1 >= 10? s1 : '0' + s1;return y + '-' + m + '-' + d1 + ' ' + h + ':' + m1 + ':' + s1;}</script>

实现的效果：