87,996
社区成员
发帖
与我相关
我的任务
分享求助JS动态添加div到页面的问题
比如一个这样布局的div
实现的效果是
我想根据后面传来的数据动态的创建多个这样的div,要怎么实现.
新手不怎么会js,但是还是硬着头皮在百度谷歌来做.
希望大家帮帮我.
最好是有代码,谢谢大家
<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,但是还是硬着头皮在百度谷歌来做.
希望大家帮帮我.
最好是有代码,谢谢大家
...全文
请发表友善的回复…
发表回复
save4me 2014-09-22
- 打赏
- 举报
做了一个Demo，可以点击查看在线演示代码
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);
}
}
});
});
tutu_10w 2014-09-22
- 打赏
- 举报
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);
}
}
});
});
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
- 打赏
- 举报
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);
}
}
});
});
