Dynamically adding DIV, why failed_html/css_WEB-ITnose-HTML Tutorial-php.cn

Dynamically adding DIV, why failed_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:46:36

Original

1167 people have browsed it

I added 10 DIVs using a for loop, but the page does not display. What went wrong?

   <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>

Copy after login

Reply to the discussion (solution)

The page needs to be re-rendered.

How to re-render the page?

1. If appendChild is used,
var grid = mini.get("datagrid");
var gridEl = grid.getEl();
div. appendChild(gridEl)

2. If the html tag of miniui is added, then after the addition is completed, you need to execute mini.parse() to parse the html tag

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

Change obj.style.background-image to obj.style.backgroundImage

Simply change it, take a look,

 <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>

Copy after login

Look at the 4th floor

The strangest thing is that you are in a jquery shell and it says "native dom operation"