效果图如上所示：

思维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>

动态创建dom元素的更多相关文章

  1. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  2. DOM – 7.动态创建DOM + 8.innerText innerHTML value

    7.动态创建DOM 8.innerText  innerHTML  value 7+8 练习:案例:点击按钮动态增加网站列表,分两列,第一列为网站的名字,第二列为带网站超链接的网站名.增加三行常见网站 ...

  3. jQuery – 7.动态创建Dom、删除节点

    动态创建Dom节点     1.使用$(html字符串)来创建Dom节点     2.append方法用来在元素的末尾追加元素     案例:动态生成网站列表     3.prepend,在元素的开始 ...

  4. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  5. JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  6. 用jQuery绑定事件到动态创建的元素上

    jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...

  7. Vue.js源码解析-Vue初始化流程之动态创建DOM

    目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...

  8. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  9. jQuery基础之（四）jQuery创建DOM元素

    利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...

随机推荐

  1. 图表框架HelloCharts（3）饼状图

    1 效果图 2 xml文件 activity_pie_chart.xml <FrameLayout xmlns:android="http://schemas.android.com/ ...

  2. [转] Jquery滚动加载

    原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...

  3. UVA 10917 Walk Through the Forest（dijkstra+DAG上的dp）

    用新模板阿姨了一天,换成原来的一遍就ac了= = 题意很重要..最关键的一句话是说:若走A->B这条边,必然是d[B]<d[A],d[]数组保存的是各点到终点的最短路. 所以先做dij,由 ...

  4. busybox filesystem httpd php-5.5.31 sqlite3 webserver

    /******************************************************************** * busybox filesystem httpd php ...

  5. POSIX 可移植操作系统接口

    在一些较老的c语言资料,经常会出现“POSIX标准”. 它的专业解释是: 可移植操作系统接口(英语:Portable Operating System Interface,缩写为POSIX),是IEE ...

  6. windows主线程等待子线程退出卡死问题

    在windows下调用_beginthread创建子线程并获得子线程id(函数返回值),如果子线程很快退出,在主线程中调用WaitForSingleObject等待该线程id退出,会导致主线程卡死.需 ...

  7. OnItemClickListener 的参数详解（转）

    转载地址:http://blog.iamzsx.me/show.html?id=147001 我们在使用ListView的时候,一般都会为ListView添加一个响应事件android.widget. ...

  8. mybatis系列-13-resultMap总结

    resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...

  9. Tasks Queues and Cron Jobs(任务队列和时钟守护作业)

    一个网络应用必须迅速响应网络请求,一般要小于1s,最好是几十微秒,以便为坐在浏览器前面的用户提供一个流畅的体验.这就给不了应用太多的时间来处理工作.有时会是有更多的工作要做而不是有时间来做它.< ...

  10. ehcache 的配置

    配置:一.在src目录下加入ehcache.xml: <cache name="SimplePageCachingFilter" maxElementsInMemory=&q ...