有这样一段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. Java线程小记

    线程是程序内部不同的执行分支,实现多线程主要有两种方式:继承自Thread类或实现Runnable接口,其实Thread类也是实现了Runnable接口,基于Java的单继承机制,我们建议使用实现Ru ...

  2. 我在GNU/Linux下使用的桌面环境工具组合

    为了使GNU/Linux桌面环境下加载的程序较少以节省内存资源和提高启动时间,我目前并不使用重量级的桌面环境KDE和Gnome,甚至连登录窗界面gdm或xdm都不用,而是直接启动到控制台,登录后调用s ...

  3. GoogleCodeJam

    2016年没有参赛,在师兄的介绍下,试了一下简单的一题,需要注意的是读写数据的形式还有具体代码. 2016资格赛 A题 Problem Bleatrix Trotter the sheep has d ...

  4. Openjudge-NOI题库-字符串移位包含问题

    题目描述 Description 对于一个字符串来说,定义一次循环移位操作为:将字符串的第一个字符移动到末尾形成新的字符串. 给定两个字符串s1和s2,要求判定其中一个字符串是否是另一字符串通过若干次 ...

  5. iOS 打包上传AppStore相关(2)-Xcode相应配置

    上一篇描述了如何在AppleDeveloper创建Certificates.App IDs和Provisioning Profiles的过程.本篇将详细描述在Xcode部分我们需要做的配置. 1.配置 ...

  6. python基础---pymsql

    pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 一.下载安装 pip3 install pymysql 二.使用 1.执行SQL #!/usr/bin/env ...

  7. 1.部分(苹果)移动端的cookie不支持中文字符,2.从json字符串变为json对象时,只支持对象数组

    1.移动端的cookie不支持中文字符.可以用编码,解码的方式解决. 2.json字符串变成相应 的,json对象数组字符串.就这样 3.不同客户端(移动端.电脑)的请求,在C#服务端的取时间的格式竟 ...

  8. Centos安装vncserver服务

    vnc是一款Windows远程桌面软件,其优点是支持跨操作系统的远程图形化控制.下面开始记录第一次安装vnc服务的过程. 1.先检查系统是否有安装VNC服务 [root@localhost ~]# [ ...

  9. Angularjs directive全面解读(1.4.5)

    说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...

  10. Major and minor numbers

    The major nuber is the driver associated with the device, while the minor number is used by the kern ...