动态创建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>

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

jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
DOM – 7.动态创建DOM + 8.innerText innerHTML value
7.动态创建DOM 8.innerText innerHTML value 7+8 练习:案例:点击按钮动态增加网站列表,分两列,第一列为网站的名字,第二列为带网站超链接的网站名.增加三行常见网站 ...
jQuery – 7.动态创建Dom、删除节点
动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素案例:动态生成网站列表 3.prepend,在元素的开始 ...
JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）
window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...
用jQuery绑定事件到动态创建的元素上
jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...
Vue.js源码解析-Vue初始化流程之动态创建DOM
目录前言一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...
jquery动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
jQuery基础之（四）jQuery创建DOM元素
利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...

随机推荐

unicode string和ansi string的转换函数及获取程序运行路径的代码
#pragma once#include <string> namespace stds { class tool { public: std::string ws2s(const std ...
学习PHP C扩展之面向对象开发方式 (转)
PHP OOP面向对象之C语言开发方式学习PHP C扩展有一段时间了,PHP手册里大部分讲的PHP的函数开发方式,网上找OOP资料比较少,想起上个月测试redis 的时候,下载PHP扩展redis源 ...
02day1
淘汰赛制递推 [问题描述] 淘汰赛制是一种极其残酷的比赛制度.2^n名选手分别标号1,2,3,…,2^n-1,2^n,他们将要参加n轮的激烈角逐.每一轮中,将所有参加该轮的选手按标号从小到大排序后, ...
【C#学习笔记】结构体使用
using System; namespace ConsoleApplication { struct _st { public string name; public int age; } clas ...
Android常用组件
UI相关图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...
解决32位plsql客户端连接不64位Oracle11g上数据库
一.解决方案因为本人安装的是64位的Oracle,plsql 是32位的故连接不上.网上有方法能连接. 1. 文件下载下载PLSQL_Developer地址 http://pan.baidu.co ...
iBatis 和MyBatis区别
从 iBatis 到 MyBatis ,你准备好了吗? 对于从事 Java EE 的开发人员来说,iBatis 是一个再熟悉不过的持久层框架了,在 Hibernate.JPA 这样的一站式对象 ...
CodeForces 54C-First Digit Law（数位，概率dp）
题意: 给你n个区间,在每个区间里各取一个数(随机取),求这n个数中超过K%的数是首位为1数的概率分析: dp[i][j]取前i个数,有j个是首位为1的数的概率易知,dp[i][j]=dp[i-1 ...
HTTP协议学习笔记-2
HTTP报文 HTTP报文分为请求报文和响应报文(requeset and response) 请求报文的格式: <method> <request -URL> <ve ...
js控制不同的时间段显示不同的css样式
js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){ datetoday ...

动态创建dom元素

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

随机推荐

热门专题