JS动态添加div到页面的有关问题

求助JS动态添加div到页面的问题
比如一个这样布局的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,但是还是硬着头皮在百度谷歌来做.
希望大家帮帮我.
最好是有代码,谢谢大家
------解决思路----------------------
<!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>
类似这样试试
------解决思路----------------------
做了一个Demo，可以点击查看在线演示代码

引用:

Quote: 引用:

<!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>' +

JS动态添加div到页面的有关问题

相关推荐