效果图如上所示：
思维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>
