Maison > interface Web > tutoriel HTML > 动态添加DIV,为什么失败了_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:46:36
original
1168 Les gens l'ont consulté

用一个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> 
Copier après la connexion


回复讨论(解决方案)

页面需要重新渲染一下。

页面需要重新渲染一下。


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


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> 
Copier après la connexion

看4楼

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal