动态创建dom元素

时间：2021-02-24 07:43:52

动态创建dom元素动态创建dom元素动态创建dom元素

效果图如上所示：

思维nav:就相当于qq空间发表动态（说说），在输入框里输入内容，点击提交（发表），内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app，大家可以随便想象下哪些情况会遇到动态创建dom元素。

代码展示如下，具体的css就不用多说，主要是写jquery

 <body>

 <div class="szk-newProject-header clearfix">

     <div class="szk-newProject-left fl">

         <img src="img/szk-1.png"/><a href="#">返回</a>

     </div>

     <div class="szk-newProject-center fl">

         <a href="#">新建项目</a>

     </div>

     <div class="szk-newProject-right fr">

         <a href="#"><img src="img/szk-2.png"/></a>

     </div>

 </div><!--szk-newProject-header-->

 <div class="inner">

     <input type="text" class="shuru" placeholder="请输入文字">

     <div class="kong">

         <input type="button" class="tijiao" value="提交">

     </div>

 </div>

 <div class="cont">

     <div class="inner">

         <img src="img/tou_03.jpg"/>

         <div class="fr">

             <time>2016年12月2日</time>

             <p>我可以发表动态了，很开心很开心</p>

         </div>

     </div>

 </div>

 </body>
   <script src="js/jquery-3.1.0.min.js"></script>

     <script>

         $(function(){

            var $shuru=$(".shuru").val("")

             $(".tijiao").on("click",function(){

                 //先创建一个Inner,然后将Inner插入到cont里面

                 var Inner=$("<div class='inner'>")

                 $(".cont").append(Inner);

                 //在Inner里面插入图片

                 Inner.append($("<img>",{src:"img/tou_03.jpg"}));

                 //再创建一个fr，将其放入Inner里面

                 var fr=$("<div class='fr'>");

                 Inner.append(fr);

                 //再创建一个time和p标签，把他们放入fr里面

                 var time=$("<time>2016.12.2</time>");

                 var p=$("<p></p>");

                 fr.append(time)

                 fr.append(p)

                 $(p).html($(".shuru").val())

                 //再清空输入框

                 $shuru=$(".shuru").val("")

             })

         })

     </script>

　用javascript实现上面的效果：

 

 <!DOCTYPE html>

 <html ng-app="myapp">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" href="css/style.css" type="text/css">

     <script src="js/common.js"></script>

     <script src="js/jquery-3.1.0.min.js"></script>

     <script>

         window.onload=function(){

             var shuRu=document.getElementsByClassName("shuru")[0];

             var tiJiao=document.getElementsByClassName("tijiao")[0];

             var cont=document.getElementsByClassName("cont")[0];

             var Inner=cont.getElementsByClassName("inner")[0];

             tiJiao.onclick=function(){

                 //先判断输入框有没 有内容，如果有，就把内容添加到下面的cont里面，而这个cont里面的内容用该是动态的增加

                 if(shuRu.value!=null){

                     //在body里边创建一个div，把这个div插入到cont里

                     var inner2=document.createElement("div");

                     inner2.className="inner";

                  //   cont.appendChild(inner2);最新的消息在最后面

                     cont.insertBefore(inner2,cont.children[0])//最新的消息在最前面

                     var Img=document.createElement("img")

                     Img.src="img/tou_03.jpg";

                     inner2.appendChild(Img)

                     var fr=document.createElement("div")

                     fr.className="fr";

                     inner2.appendChild(fr)

                     var time=document.createElement("time")

                     fr.appendChild(time)

                     var p=document.createElement("p")

                     fr.appendChild(p)

                     p.innerHTML= shuRu.value;

                     var date=new Date()

                     time.innerHTML=date.toLocaleString();

                     shuRu.value=null

                 }else {

                 }

             }

         }

     </script>

 </head>

 <body>

 <div class="szk-newProject-header clearfix">

     <div class="szk-newProject-left fl">

         <img src="img/szk-1.png"/><a href="#">返回</a>

     </div>

     <div class="szk-newProject-center fl">

         <a href="#">新建项目</a>

     </div>

     <div class="szk-newProject-right fr">

         <a href="#"><img src="img/szk-2.png"/></a>

     </div>

 </div><!--szk-newProject-header-->

 <div class="inner">

     <input type="text" class="shuru" placeholder="请输入文字">

     <div class="kong">

         <input type="button" class="tijiao" value="提交">

     </div>

 </div>

 <div class="cont">

     <div class="inner">

         <img src="img/tou_03.jpg"/>

         <div class="fr">

             <time>2016年12月2日</time>

             <p>我可以发表动态了，很开心很开心</p>

         </div>

     </div>

 </div>

 </body>

 </html>

相关文章