效果图如上所示：

思维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. jrtplib跨网络通讯NAT穿透问题解决方法

    前几篇文章讲了使用jrtplib在Android和pc端进行通讯的方法 在实际项目中,手机端和pc端一般不会在同一个子网内,两者之间联络可能要走路由器之类的NAT(网络地址转换 Network Add ...

  2. JavaScript备忘录-原型

    function Person() { this.name = "fs"; } Person.prototype.sayHello = function () { return & ...

  3. ASP.NET MVC 教程汇总

    自学MVC看这里——全网最全ASP.NET MVC 教程汇总   MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要 ...

  4. UVALive 4255 Guess

    这题竟然是图论···orz 题意:给出一个整数序列a1,a2,--,可以得到如下矩阵 1 2 3 4 1 - + 0 + 2   + + + 3       -  - 4         + &quo ...

  5. 【转载】ACM总结——dp专辑

    感谢博主——      http://blog.csdn.net/cc_again?viewmode=list       ----------  Accagain  2014年5月15日 动态规划一 ...

  6. mybatis Mapper XML 文件

    MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会立即发现省掉了将近 95% ...

  7. codeforces 260 div2 B题

    打表发现规律,对4取模为0的结果为4,否则为0,因此只需要判断输入的数据是不是被4整出即可,数据最大可能是100000位的整数,判断能否被4整出不能直接去判断,只需要判断最后两位(如果有)或一位能否被 ...

  8. CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...

  9. C#冒泡排序详解

    今天写一简单的冒泡排序,带有详细的中文注释,新手一定要看看! 因为这是找工作面试时经常 笔试 要考的题目. using System; using System.Collections.Generic ...

  10. XNA Game Studio 4.0 Programming 随便读，随便记 “Rendering Text”

    在游戏中,通常要与玩家交流,比如分数,提示等.这就需要一种新的精灵, 它就叫SpritFont.下面先将其增加到项目中: 项目 -----> 添加新项-----> Sprite Font ...