js添加div
有这样一段div布局
<div class="clearfix">
<p class="left c">
<span>456</span>
</p>
<p class="left cd">
<span style="float: left;">789</span>
<span>vs</span>
<span style="float: right;">147</span>
<em>258</em>
</p>
<p class="right d">
<span>357</span>
</p>
</div>
想根据后面传来的数据动态的创建多个这样的div,要怎么实现.
那么:<input type="button" value='add' onclick="createDiv('container')">定义一个方法;
<script type="text/javascript">
function createDiv(brother){
brother=brother?document.getElementById(brother):document.body;
var html='<div class="clearfix">'+
'<p class="left c"><span>456</span></p>'+
'<p class="left cd"><span style="float: left;">789</span><span>vs</span><span style="float: right;">147</span><em>258</em></p>'+
'<p class="right d"><span>357</span></p>'+
'</div>';
brother.insertAdjacentHTML('beforeend',html);
}
</script>
js添加div的更多相关文章
- 通过原生js添加div和css
function createStyle(){ return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px ...
- 动态添加div及对应的js、css文件
动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...
- JS添加删除DIV
function addDiv(w,h){ //如果原来有“divCell”这个图层,先删除这个图层 deleteDiv(); //创建一个div var my = d ...
- js动态添加Div
利用JavaScript动态添加Div的方式有很多,在这次开发中有用到,就搜集了一下比较常用的. 一.在一个Div前添加Div <html> <body> <div id ...
- JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...
- JavaScript 动态添加div 绑定点击事件
1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
随机推荐
- C++ static与单例模式
单例模式是应用最多的一种设计模式,它要求系统中每个类有且只能有一个实例对象. 主要优点: 1.提供了对唯一实例的受控访问. 2.由于在系统内存中只存在一个对象,因此可以节约系统资源,对于一些需要频繁创 ...
- seajs +gruntjs 合作开发
nodejs的出现 让服务器端能运行 js commonjs规范 规范服务器端开发按照什么写法去写 包括模块化开发 ( 不同点 请求在本地 js加载) AMD规范 浏览器端开发的规范 (不同点: 浏览 ...
- Opencv+MFC获取摄像头数据,显示在Picture控件
分为两步:OpenCV获取摄像头数据+图像在Picture上显示 第一步:OpenCV获取摄像头数据 参考:http://www.cnblogs.com/epirus/archive/2012/06/ ...
- percentiles of live data capture
For example, every ten seconds I got a server response time, I want to know the 90 percentile respon ...
- java上传并下载以及解压zip文件有时会报文件被损坏错误分析以及解决
情景描述: 1.将本地数据备份成zip文件: 2.将备份的zip文件通过sftp上传到文件服务器: 3.将文件服务器上的zip文件下载到运行服务器: 4.将下载的zip文件解压到本地(文件大小超过50 ...
- TcpListener 示例
using System; using System.IO; using System.Net; using System.Net.Sockets; using System.Text; class ...
- Spring Boot 系列教程19-后台验证-Hibernate Validation
后台验证 开发项目过程中,后台在很多地方需要进行校验操作,比如:前台表单提交,调用系统接口,数据传输等.而现在多数项目都采用MVC分层式设计,每层都需要进行相应地校验. 针对这个问题, JCP 出台一 ...
- pre标签
$(" .pop-info").html("<PRE>"+data.info+"<PRE>"): 数据库里的换行存的 ...
- scala调用外部命令
scala调用外部命令 1. 导入sys.process包 2. 调用方式:" 外部命令 " ! 双引号内+外部命令+感叹号 例: scala调用外部命令工作原 ...
- Android(对话框)
一.消息对话框 所谓的消息对话框,就是说当你点击按钮弹框,它会弹出一个消息提示你,消息对话框有相应的确定.取消.其他按钮,比如下方: 代码: //消息提示框 public void testOne(V ...