动态创建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 ...
随机推荐
- Java [Leetcode 319]Bulb Switcher
题目描述: There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off ...
- h264检测是I帧还是P帧,解决录像第一帧有马赛克问题
最近使用h264码流数据进行录像,但是录出来的第一帧有马赛克,究其原因是录像的第一帧不是关键帧,所以需要录像是需要判断第一帧是否是关键帧,方法有两种,第一种是原码流的基础上查找,第二种是将原码流传递给 ...
- 【转】statfs获得硬盘使用情况 模拟linux命令 df
原文网址:http://blog.csdn.net/mociml/article/details/5335474 说明:本文以主要为转载内容,同时加入了我在使用过程中遇到问题对其的修正!!!!!!!! ...
- Delphi打开窗体时报"Corrupt Portfolio Stream"
今天在打开一个Delphi窗体时报了这么一个错误: Corrupt Portfolio Stream 查了一下,主要是由于Delphi窗体的*.ddp文件损坏引起的. 解决方法: 删除.ddp 文 ...
- 认识solr结构,了解核心的文件目录
下载solr并解压后,发现solr的目录里有很多的东西,此时我们可能会感到很恐慌,不知如何下手,下面让我带你认识它. 1.解压后的solr目录结构如下: 虽然里面有很多的文件,但是我们需要的其实就两个 ...
- Android-AnimationDrawable(一)
大家平时见到的最多的可能就是Frame动画了,Android中当然也少不了它.它的使用更加简单,只需要创建一个 AnimationDrawabledF对象来表示Frame动画,然后通过addFrame ...
- [Everyday Mathematics]20150122
设 $f:[0,1]\to [0,1]$. (1). 若 $f$ 连续, 试证: $\exists\ \xi\in [0,1],\st f(\xi)=\xi$. (2). 若 $f$ 单调递增, 试证 ...
- Selenium2Library系列 keywords 之 _SelectElementKeywords 之 get_selected_list_labels(self, locator)
def get_selected_list_labels(self, locator): """Returns the visible labels of selecte ...
- 瞬间从IT屌丝变大神——注释规则
注释的主要规则如下: 公共组件和各栏目的维护者都需要在文件头部加上注释说明: /** *文件用途说明 *作者姓名 *联系方式*制作日期 **/ 大的模块注释方法: //======= //代码用途 / ...
- [转]SQL中char、varchar、nvarchar的区别
char char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符. nvarcha ...