求助JS动态添加div到页面的问题

tutu_10w 2014-09-21 12:19:59
比如一个这样布局的div

<div class="main">
<div class="top"><p>第一个</p></div>
<div class="bottom">
<div class="left"><p>槽温</p><span class="sp1">10</span></div>
<div class="right"><p>缸温</p></div>
<div style="clear:both;"></div>
</div>
</div>


实现的效果是

我想根据后面传来的数据动态的创建多个这样的div,要怎么实现.
新手不怎么会js,但是还是硬着头皮在百度谷歌来做.
希望大家帮帮我.
最好是有代码,谢谢大家
...全文
292 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
save4me 2014-09-22
  • 打赏
  • 举报
回复
做了一个Demo,可以点击查看在线演示代码
引用 3 楼 tutu_10w 的回复:
[quote=引用 1 楼 zzgzzg00 的回复:] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="container"></div> <input type="button" value='add' onclick="createDiv('container')"> <script type="text/javascript"> function createDiv(parent){ parent=parent?document.getElementById(parent):document.body; var html='<div class="main">'+ '<div class="top"><p>第一个</p></div>'+ '<div class="bottom">'+ '<div class="left"><p>槽温</p><span class="sp1">10</span></div>'+ '<div class="right"><p>缸温</p></div>'+ '<div style="clear:both;"></div>'+ '</div>'+ '</div>'; parent.insertAdjacentHTML('beforeend',html); } </script> </body> </html> 类似这样试试

function createDiv(parent) {
                    parent = parent ? document.getElementById(container) : document.body;
                    var html = '<div  class="main">' +
            	'<div class="top"><p>fdfd</p></div>' +
            	'<div class="bottom">' +
                	'<div class="left"><p>槽温</p><span class="sp1">10</span></div>' +
                	'<div class="right"><p>缸温</p></div>' +
            	'<div style="clear:both;"></div>' +
            	'</div>' +
                '</div>';
                    parent.insertAdjacentHTML('beforeend', html);
                };
 $(document).ready(function ShowTempNow() {
    $.ajax({
        type: "get",    //设置调用类型  
        async: false,
        dataType: "json",   //设置数据类型  
        url: "../../Handler/BusiTimeStatus.ashx",    //url  
        success: function (obj) {
            var count = obj.total;
            //   alert(eval(obj.rows[0].BlenderCurrent));
            for (var j = 0; j < count; j++) {
                createDiv(Div1);
            }
        }
    });
});
这样调用最后没有成功,你觉得是什么问题. var count = obj.total; 这个count是传过来了的,Div1也是在其它地方定义了[/quote]
tutu_10w 2014-09-22
  • 打赏
  • 举报
回复
引用 4 楼 save4me 的回复:
做了一个Demo,可以点击查看在线演示代码 [quote=引用 3 楼 tutu_10w 的回复:] [quote=引用 1 楼 zzgzzg00 的回复:] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="container"></div> <input type="button" value='add' onclick="createDiv('container')"> <script type="text/javascript"> function createDiv(parent){ parent=parent?document.getElementById(parent):document.body; var html='<div class="main">'+ '<div class="top"><p>第一个</p></div>'+ '<div class="bottom">'+ '<div class="left"><p>槽温</p><span class="sp1">10</span></div>'+ '<div class="right"><p>缸温</p></div>'+ '<div style="clear:both;"></div>'+ '</div>'+ '</div>'; parent.insertAdjacentHTML('beforeend',html); } </script> </body> </html> 类似这样试试

function createDiv(parent) {
                    parent = parent ? document.getElementById(container) : document.body;
                    var html = '<div  class="main">' +
            	'<div class="top"><p>fdfd</p></div>' +
            	'<div class="bottom">' +
                	'<div class="left"><p>槽温</p><span class="sp1">10</span></div>' +
                	'<div class="right"><p>缸温</p></div>' +
            	'<div style="clear:both;"></div>' +
            	'</div>' +
                '</div>';
                    parent.insertAdjacentHTML('beforeend', html);
                };
 $(document).ready(function ShowTempNow() {
    $.ajax({
        type: "get",    //设置调用类型  
        async: false,
        dataType: "json",   //设置数据类型  
        url: "../../Handler/BusiTimeStatus.ashx",    //url  
        success: function (obj) {
            var count = obj.total;
            //   alert(eval(obj.rows[0].BlenderCurrent));
            for (var j = 0; j < count; j++) {
                createDiv(Div1);
            }
        }
    });
});
这样调用最后没有成功,你觉得是什么问题. var count = obj.total; 这个count是传过来了的,Div1也是在其它地方定义了[/quote][/quote] 真棒
zebro1573 2014-09-21
  • 打赏
  • 举报
回复
后台的数据过来应该是 [ {"a":"第一个", ["b":"槽温1","c":'缸温1'] },{"a":"第二个", ["b":"槽温2","c":'缸温2'] },{"a":"第三个", ["c":"槽温3","c":'缸温3'] } ] 最后你for(){}此数据,懂不
似梦飞花 2014-09-21
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="container"></div> <input type="button" value='add' onclick="createDiv('container')"> <script type="text/javascript"> function createDiv(parent){ parent=parent?document.getElementById(parent):document.body; var html='<div class="main">'+ '<div class="top"><p>第一个</p></div>'+ '<div class="bottom">'+ '<div class="left"><p>槽温</p><span class="sp1">10</span></div>'+ '<div class="right"><p>缸温</p></div>'+ '<div style="clear:both;"></div>'+ '</div>'+ '</div>'; parent.insertAdjacentHTML('beforeend',html); } </script> </body> </html> 类似这样试试
tutu_10w 2014-09-21
  • 打赏
  • 举报
回复
引用 1 楼 zzgzzg00 的回复:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="container"></div> <input type="button" value='add' onclick="createDiv('container')"> <script type="text/javascript"> function createDiv(parent){ parent=parent?document.getElementById(parent):document.body; var html='<div class="main">'+ '<div class="top"><p>第一个</p></div>'+ '<div class="bottom">'+ '<div class="left"><p>槽温</p><span class="sp1">10</span></div>'+ '<div class="right"><p>缸温</p></div>'+ '<div style="clear:both;"></div>'+ '</div>'+ '</div>'; parent.insertAdjacentHTML('beforeend',html); } </script> </body> </html> 类似这样试试

function createDiv(parent) {
                    parent = parent ? document.getElementById(container) : document.body;
                    var html = '<div  class="main">' +
            	'<div class="top"><p>fdfd</p></div>' +
            	'<div class="bottom">' +
                	'<div class="left"><p>槽温</p><span class="sp1">10</span></div>' +
                	'<div class="right"><p>缸温</p></div>' +
            	'<div style="clear:both;"></div>' +
            	'</div>' +
                '</div>';
                    parent.insertAdjacentHTML('beforeend', html);
                };
 $(document).ready(function ShowTempNow() {
    $.ajax({
        type: "get",    //设置调用类型  
        async: false,
        dataType: "json",   //设置数据类型  
        url: "../../Handler/BusiTimeStatus.ashx",    //url  
        success: function (obj) {
            var count = obj.total;
            //   alert(eval(obj.rows[0].BlenderCurrent));
            for (var j = 0; j < count; j++) {
                createDiv(Div1);
            }
        }
    });
});
这样调用最后没有成功,你觉得是什么问题. var count = obj.total; 这个count是传过来了的,Div1也是在其它地方定义了
Dvbbs7.1.0Sp1产品主要更新内容,此下载已包含所有最新更新和所有原版文件 1、重整核心结构,采用成熟的缓存加载模式,能保持稳定的运行状态。缓存数据大部分采用XML模式,易于存取和管理。优化核心代码(局部采用XSLT代替脚本执行,效率提高),更加高效和简洁。 2、主要页面采用数据库==>XML+XSLT方式处理,效率高。 3、几个主要页面采用Div+Css标准重构和优化,对搜索引擎能更好的支持。 4、针对搜索引擎进行优化,对主流的搜索引擎提供了不同的显示结果和站点地图等优化。 5、重写论坛回收站,使用和操作更加方便,超版也可进入管理(只能还原),处理超大数据也不会出现论坛卡死情况。 6、重写论坛审核机制,超强的论坛审核,满足用户的不同要求,全方位的监视论坛数据,是论坛信息的软件防火墙。 7、论坛点券购买采用支付宝新接口,站长只要在支付宝网站和论坛后台设置好相关信息,用户购买点券的费用将直接划到站长支付宝帐号,中间不收取任何手续费。 8、采纳部分站长建议,在论坛中直接整合支付宝电子商务交易功能(分版面开关)。此概念在国内为动网首创,与传统电子商务交易网站不同,论坛中的交易有更加宽松的交流气氛、自由的讨论氛围等特点,在加上采用支付宝作为信用保障体系,对买卖双方交易都更加安全和可靠。 9、重点推出:动网论坛博客系统,论坛用户可直接激活个人博客帐号、帖子可直接转入自己的博客、个人文章、文章收藏、个人相册、链接(书签)、交易(类似论坛交易,可做个人店铺)、关键字设置(可设置一些常用的链接地址和关键字,文章中遇到相关关键字则可自动替换为相关链接和文字)、日志天气、访客脚印(浏览用户可留下自己的访问印记)等,具体可点击导航中的“博客(boke)”链接访问。 7.1.0整体功能调整和新增: 1、道具中心,供购买论坛各种功能性道具,不同道具可在论坛进行不同操作。 2、金币和点券概念,独立于道具中心之外,可用来进行帖子的购买、付费版面的进入等等操作 3、点券的购买,可通过手机短信和网络支付两种方式,此外论坛积分、经验、点券等数值可和论坛金币转换 4、交易帖(金币购买)、悬赏求助帖(赠送金币)、获赠金币帖等功能,独立于道具中心之外 5、WAP论坛功能,可通过特定地址用手机访问论坛,随时随地都可以关注喜欢的论坛 6、用户组功能调整,用户组分为5个大类,分别是:系统组、特殊组、用户组、多属性用户组和VIP组,用户组为原来用户等级,特殊组为系统管理员自定义不按升级标准升级的组,多属性用户组可同时拥有多个组权限,VIP组下面介绍 7、VIP用户功能,在开启VIP用户功能且添加了对应组的情况下,用户可以付费加入某个组,可拥有免费查看VIP帖和进入VIP版面的权限,管理员后台可设置vip用户的付费标准和期限 8、CSS风格独立出来,和原来每份模板都有独立的一份CSS不同,目前可设置不同CSS对应的模板,主要是方便用户操作选择以及缩减数据占用 9、新增论坛文字广告位 10、新增论坛规则部分,在后台版面管理可新增和编辑 11、魔法表情,独立于道具中心之外,可用金币或点券购买 12、后****立目录,可自己在后台设置后台目录并手动更改目录名称,保障论坛安全,此外没有登录前台也可直接访问后台登录页面进行登录(要同时输入前后台帐号信息) 13、超强的上传文件控制,可对论坛上传的图片水印、文字、颜色、透明度和缩略图进行完整的控制 14、动网官方自动通知系统,可以第一时间获得官方的通知信息,此外在可阅读官方最新的帖子,同时可以在自己的论坛后台即可访问官方论坛并进行问题的提出和浏览操作 15、强化日志管理部分,可针对多种不同类型的论坛操作日志进行查询和操作 16、用户管理新增VIP用户浏览、批量奖励或惩罚用户、合并用户等操作 17、超强的邮件群发系统,可针对个别用户、某个群用户、某个特定条件的用户群进行邮件群发工作 18、原系统空间占用功能改为系统信息检测,相当于ASP探针,可查看服务器对论坛的一些支持情况 19、用户组权限的编辑可进行批量更新,可单独的选择某几个权限对多个用户组进行更新 20、RSS订阅论坛信息功能,可RSS订阅器可订阅包括各个版面最新帖子、精华帖子等内容 21、细化部分页面结构和风格,包括首页、帖子列表、帖子内容等几个页面 22、为兼容搜索引擎搜索,取消了大部分JS内容输出而改用xslt控制内容和界面 23、部分小页面合并为一个独立的功能页面 24、强化搜索页面功能,管理员和有权限的用户可直接对搜索结果进行批量的帖子操作 25、删去部分CSS风格,目前仅保留9种颜色风格 26、UBB发贴模式可在后台进行控制,发贴模式可选 27、增强审核部分功能,管理员可直接查看并审核所有版面的帖子,也可进行数据查询并审核的操作 28、整体优化代码,制定高效快

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧