有这样一段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的更多相关文章

  1. 通过原生js添加div和css

    function createStyle(){ return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px ...

  2. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  3. JS添加删除DIV

    function addDiv(w,h){     //如果原来有“divCell”这个图层,先删除这个图层    deleteDiv();    //创建一个div       var my = d ...

  4. js动态添加Div

    利用JavaScript动态添加Div的方式有很多,在这次开发中有用到,就搜集了一下比较常用的. 一.在一个Div前添加Div <html> <body> <div id ...

  5. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  6. JavaScript 动态添加div 绑定点击事件

    1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...

  7. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  8. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. OSI参考模型初识

    纪念我曾今热爱的数通(^o^). 1.osi参考模型 2.数据的封装和解封装 3.主机和主机间通信

  2. hdu 4122 Alice's mooncake shop(单调队列)

    题目链接:hdu 4122 Alice's mooncake shop 题意: 有n个订单和可以在m小时内制作月饼 接下来是n个订单的信息:需要在mon月,d日,year年,h小时交付订单r个月饼 接 ...

  3. hdu 3410 Passing the Message(单调队列)

    题目链接:hdu 3410 Passing the Message 题意: 说那么多,其实就是对于每个a[i],让你找他的从左边(右边)开始找a[j]<a[i]并且a[j]=max(a[j])( ...

  4. 域名注册商namesilo价格便宜,赠送whois保护,最新优惠码:geekradio

    注册域名,不懂事的中国人一般去国内奸商万网注册,价格贵,域名管理风险大,甚至注册.cn域名,花钱还吃亏.精明一点的中国人选godaddy,namecheap,gandi这类国外域名注册商,价格不贵,你 ...

  5. pymongo数据报表脚本

    最近打算将平时自己的一些小工具整理整理,由于一直使用python写脚本,而且数据库一直使用MongoDB,所以直接使用pymonogo驱动数据库做一些报表生成的小脚本,此次的脚本主要针对每个月中公司业 ...

  6. HTTPS详解

    HTTPS(Hypertext Transfer Protocol over Secure Socket Layer,基于SSL的HTTP协议)使用了HTTP协议,但HTTPS使用不同于HTTP协议的 ...

  7. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

  8. 运算程序,计算玩判断,Y继续,重复计算,N结束

    #include "stdio.h" void main() { /*定义变量,d1,d2:第一.二个数 fu:符号 p1:接收判断号Y/N p2:接收的p1赋给p1 */ int ...

  9. Gdiplus 贴图(助记) -------------------拖动整个对话框

    最简单的两种方法: 一.使WM_NCHITTEST始终返回HTCAPTION,也就是欺骗系统让他以为这是菜单栏. LRESULT CDemoDlg::OnNcHitTest(CPoint point) ...

  10. 扩展KMP——算法总结,来自于 迷路的鸽子

    扩展kmp                 LRH 所谓扩展kmp指的是与kmp相似的求辅助数组的原理,但是本身与kmp关系不大. 1.exkmp的用途:给定一个主串s和一个子串t,求出s中每一个后缀 ...