效果图如上所示：

思维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. [转] Jquery滚动加载

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

  2. exec、eval

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- #info #warning def log(message): print('------------- ...

  3. 实时通讯库 libre/librem/restund/baresip

    http://www.creytiv.com/ 源码下载 libre Toolkit library for asynchronous network IO with protocol stacks ...

  4. android模块化app开发-4为APP减负

    现在android应用中一个趋势是应用越来越大,免去游戏不谈普通APP也是一个个的体积直线增长.这里面除了业务增长外各种接口jar包的对接也占了不少比重.像广告SDK,统计SDK,支付SDK等这些我们 ...

  5. (原创)LAMP教程3-下载centos6.4

    (原创)LAMP教程3-下载centos6.4 今天我要给大家讲的是安装CentOS-6.4-x86_64,是的没有错,就是64位的,因为我的机子是4G的内存,安装64位的centos是绰绰有余啊,但 ...

  6. linux下mysql数据库的学习

    转载博客:http://freedomljtt.blog.163.com/blog/static/72294949201210145441701/ ubuntu12.04 卸载和安装mysql 卸载m ...

  7. pci 记录

    用linux 下的sysfs可以方便的查看pci设备的配置和资源. 所有的pci设备在/sys/bus/pci/device 下面看到 pci配置空间对应的是设备对应的目录下的config文件,是二进 ...

  8. XNA Game Studio 4.0 Programming 随便读，随便记 “Game Class”

    XNA 中的 Game 类,是所有神奇事情发生的地方.几乎游戏中所有的事情都由它来操办. 它是项目中的王者,让我们深入窥探一番: 虚方法 Game 本身从众多其它地方继续了许多能力才能完成游戏中的事情 ...

  9. win7旗舰版通知windows不是正版副本解决方法

    原文转载http://www.cnblogs.com/simple_666/archive/2013/04/13/win7%E6%97%97%E8%88%B0%E7%89%88%E9%80%9A%E7 ...

  10. mysql 游标最后一行 重复问题

    BEGINdeclare p_id INT;declare p_Code INT default 0;declare p_Logo INT default 0;declare p_Name varch ...