有这样一段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. 一步步优化JVM三:GC优化基础

    本节主要描述关于垃圾回收器性能的三个指标,三个关于垃圾回收器优化的基本原则,以及优化HotSpot VM的垃圾回收器的信息收集,在这些指标中权衡以及信息的收集是非常重要的. 性能指标    吞吐量:衡 ...

  2. background-size做自适应的背景图

    background-size做自适应的背景图 在我们做页面布局的时候往往会遇到这样的情况当我固定一个元素的尺寸,在像元素加入背景的时候发现背景图片的原始尺寸很大,当我把背景图写入时往往超过元素很大一 ...

  3. Linux服务器性能指标查询命令安装

    Linux命令扫盲 之 sar   今天在读<大规模Web服务开发技术>一书的时候,书中提到了sar这个命令,感觉很有用,有必要整理学习一下.(对于一位Linux初学者,不能放过任何一个学 ...

  4. EFI、GPT和BIOS、MBR

    用了数十年的PC机主板架构是BIOS模式.但在2004年,微软和英特尔共同推出一种名为可扩展固件接口(EFI)的主板升级换代方案.EFI,即可扩展固件接口(Extensible Firmware In ...

  5. curl 命令使用总结

    curl 查看网页源码 curl www.sina.com 保存页面 -o curl -o [文件名] www.sina.com 直接在curl命令后加上网址,就可以看到网页源码. 如果要把这个网页保 ...

  6. JS时间日期格式转换

      第一种: function ConvertJSONDate(jsondate) {        if (jsondate != "" && jsondate  ...

  7. Android内存泄漏检测利器:LeakCanary

    Android内存泄漏检测利器:LeakCanary MAR 28TH, 2016 是什么? 一言以蔽之:LeakCanary是一个傻瓜化并且可视化的内存泄露分析工具 为什么需要LeakCanary? ...

  8. 辽宁OI2016夏令营模拟T1-dis

    数值距离(dis.pas/c/cpp)题目大意我们可以对一个数 x 进行两种操作:1. 选择一个质数 y,将 x 变为 x*y2. 选择一个 x 的质因数 y,将 x 变为 x/y定义两个数 a,b ...

  9. L3-007. 天梯地图

    L3-007. 天梯地图 题目链接:https://www.patest.cn/contests/gplt/L3-007 Dijstra 这题是Dijstra的变形,麻烦的是两种最短路的相同距离时的选 ...

  10. Linux性能监测:CPU篇(转)

    http://os.51cto.com/art/201012/239880.htm CPU 的占用主要取决于什么样的资源正在 CPU 上面运行,比如拷贝一个文件通常占用较少 CPU,因为大部分工作是由 ...