Rumah > hujung hadapan web > html tutorial > 动态添加DIV,为什么失败了_html/css_WEB-ITnose

动态添加DIV,为什么失败了_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:46:36
asal
1158 orang telah melayarinya

用一个for循环添加了10个 DIV,可是页面不显示,哪里出错了啊

   <html>  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <head>      <title>看看连</title>      <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 	<script>			$(document).ready(function(){			var divId=0;			for(var i=0;i<10;i++){				var obj =document.createElement("div");				obj.id="myDiv"+divId;				divId++;				obj.style.background-image='url(1.jpg)';							obj.style.height="50px";				obj.style.width="50px";								document.body.appendChild(obj);          			}		});		</script>    </head>      <body>      </body>      </html> 
Salin selepas log masuk


回复讨论(解决方案)

页面需要重新渲染一下。

页面需要重新渲染一下。


怎么重新渲染一下页面啊?


1.如果是用appendChild来做,
var grid = mini.get("datagrid");
var gridEl = grid.getEl();
div.appendChild(gridEl)

2.如果是加入的miniui的html标签,那么加入完毕,需要执行下mini.parse(),来解析下html标签

obj.style['background-image']='url(1.jpg)';

obj.style.background-image改成obj.style.backgroundImage

简单改了一下,你看看,

 <html>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <head>      <title>看看连</title>      <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>     <script>        $(document).ready(function(){            var htmlappend="";            for(var i=0;i<10;i++){               htmlappend+= '<div id=myDiv'+i+' style = "backgroundImage:url(1.jpg);color:red;height:50px;width:150px;">序号:'+(i+1)+'</div> ';            }            $("body").append(htmlappend);           });    </script>    </head>      <body>      </body>      </html> 
Salin selepas log masuk

看4楼

最奇怪的是  你在一个jquery的壳子里面  写着 原生dom操作

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan