Home > Article > Web Front-end > Dynamically adding DIV, why failed_html/css_WEB-ITnose
Dynamically adding DIV, why failed_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:361137browse
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>
Reply to the discussion (solution)
The page needs to be re-rendered.
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> Look at the 4th floor
The strangest thing is that you are in a jquery shell and it says "native dom operation"