效果图如上所示：
思维nav:就相当于qq空间发表动态（说说），在输入框里输入内容，点击提交（发表），内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app，大家可以随便想象下哪些情况会遇到动态创建dom元素。
代码展示如下，具体的css就不用多说，主要是写jquery
1 <body> 2 <div class="szk-newProject-header clearfix"> 3 <div class="szk-newProject-left fl"> 4 <img src="img/szk-1.png"/><a href="#">返回</a> 5 </div> 6 <div class="szk-newProject-center fl"> 7 <a href="#">新建项目</a> 8 </div> 9 <div class="szk-newProject-right fr"> 10 <a href="#"><img src="img/szk-2.png"/></a> 11 </div> 12 </div><!--szk-newProject-header--> 13 <div class="inner"> 14 <input type="text" class="shuru" placeholder="请输入文字"> 15 <div class="kong"> 16 <input type="button" class="tijiao" value="提交"> 17 </div> 18 </div> 19 <div class="cont"> 20 <div class="inner"> 21 <img src="img/tou_03.jpg"/> 22 <div class="fr"> 23 <time>2016年12月2日</time> 24 <p>我可以发表动态了，很开心很开心</p> 25 </div> 26 </div> 27 </div> 28 </body>
1 <script src="js/jquery-3.1.0.min.js"></script>
2 <script>
3 $(function(){
4 var $shuru=$(".shuru").val("")
5 $(".tijiao").on("click",function(){
6 //先创建一个Inner,然后将Inner插入到cont里面
7 var Inner=$("<div class='inner'>")
8 $(".cont").append(Inner);
9 //在Inner里面插入图片
10 Inner.append($("<img>",{src:"img/tou_03.jpg"}));
11 //再创建一个fr，将其放入Inner里面
12 var fr=$("<div class='fr'>");
13 Inner.append(fr);
14 //再创建一个time和p标签，把他们放入fr里面
15 var time=$("<time>2016.12.2</time>");
16 var p=$("<p></p>");
17 fr.append(time)
18 fr.append(p)
19 $(p).html($(".shuru").val())
20 //再清空输入框
21 $shuru=$(".shuru").val("")
22 })
23 })
24 </script>
用javascript实现上面的效果：
1 <!DOCTYPE html>
2 <html ng-app="myapp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/style.css" type="text/css">
7 <script src="js/common.js"></script>
8 <script src="js/jquery-3.1.0.min.js"></script>
9 <script>
10 window.onload=function(){
11 var shuRu=document.getElementsByClassName("shuru")[0];
12 var tiJiao=document.getElementsByClassName("tijiao")[0];
13 var cont=document.getElementsByClassName("cont")[0];
14 var Inner=cont.getElementsByClassName("inner")[0];
15 tiJiao.onclick=function(){
16 //先判断输入框有没 有内容，如果有，就把内容添加到下面的cont里面，而这个cont里面的内容用该是动态的增加
17 if(shuRu.value!=null){
18 //在body里边创建一个div，把这个div插入到cont里
19 var inner2=document.createElement("div");
20 inner2.className="inner";
21 // cont.appendChild(inner2);最新的消息在最后面
22 cont.insertBefore(inner2,cont.children[0])//最新的消息在最前面
23 var Img=document.createElement("img")
24 Img.src="img/tou_03.jpg";
25 inner2.appendChild(Img)
26 var fr=document.createElement("div")
27 fr.className="fr";
28 inner2.appendChild(fr)
29 var time=document.createElement("time")
30 fr.appendChild(time)
31 var p=document.createElement("p")
32 fr.appendChild(p)
33 p.innerHTML= shuRu.value;
34 var date=new Date()
35 time.innerHTML=date.toLocaleString();
36 shuRu.value=null
37 }else {
38 }
39 }
40 }
41 </script>
42 </head>
43 <body>
44 <div class="szk-newProject-header clearfix">
45 <div class="szk-newProject-left fl">
46 <img src="img/szk-1.png"/><a href="#">返回</a>
47 </div>
48 <div class="szk-newProject-center fl">
49 <a href="#">新建项目</a>
50 </div>
51 <div class="szk-newProject-right fr">
52 <a href="#"><img src="img/szk-2.png"/></a>
53 </div>
54 </div><!--szk-newProject-header-->
55 <div class="inner">
56 <input type="text" class="shuru" placeholder="请输入文字">
57 <div class="kong">
58 <input type="button" class="tijiao" value="提交">
59 </div>
60 </div>
61 <div class="cont">
62 <div class="inner">
63 <img src="img/tou_03.jpg"/>
64 <div class="fr">
65 <time>2016年12月2日</time>
66 <p>我可以发表动态了，很开心很开心</p>
67 </div>
68 </div>
69 </div>
70 </body>
71 </html>
来源：https://www.cnblogs.com/ouyangyulin/p/6126706.html