How to dynamically create divs using Js-JS Tutorial-php.cn

How to dynamically create divs using Js

不言

Release： 2018-06-25 09:17:30

Original

2459 people have browsed it

This article mainly introduces tips on deduplication or statistics of PHP two-dimensional arrays based on a certain field. It has a certain reference value. Now I share it with you. Friends in need can refer to it

This is the original CSS style

.item{float:left;overflow:hidden;margin-left:8px;margin-top:10px;width: 320px; height: 
250px;background-repeat: no-repeat; background-image:url(../images/bgred.jpg)} 
.curve{position:relative;width:320px; height:250px; z-index:1; left: 75px; top: -40px;}

Copy after login

The code for dynamically creating p is as follows:

for(j = 0;j*8 <str.length; j++) 
{ 
var myp = window.frames["displayFrame"].document.createElement("p"); 
myp.setAttribute("id","itemp"+j); 
myp.style.styleFloat="left"; 
myp.style.overflow="hidden"; 
myp.style.marginLeft="8px"; 
myp.style.marginTop="10px"; 
myp.style.width="320px"; 
myp.style.height="250px"; 
myp.style.backgroundRepeat="no-repeat"; 
myp.style.backgroundImage="url(image/bgred.jpg)" 
window.frames["displayFrame"].document.body.appendChild(myp); 
var curvep =window.frames["displayFrame"].document.createElement("p"); 
curvep.setAttribute("id","curvep"+j); 
curvep.style.position="relative"; 
curvep.style.zIndex=1; 
curvep.style.left="75px"; 
curvep.style.top="-40px"; 
curvep.style.width="320px"; 
curvep.style.height="250px"; 
window.frames["displayFrame"].document.getElementById("pitem"+j).appendChild(curvep); 
}

Copy after login

Add the p element to HTML.
You can also define one in HTML SPAN

window.frames["displayFrame"].document.getElementById("spanId").appendChild(myp); 
window.frames["displayFrame"].document.body.appendChild(myp);

Copy after login

Both IE and Firefox support it.
Another thing to note is this CSS element
Floating effect: float:left
The code under IE is: myp.style. styleFloat="left";
The code in Firefox is: myp.style.cssFloat="left";
Other elements such as this:
In CSS writing, it is usually: margin-left:8px
And when adding dynamically, it needs to be removed - :myp.style.marginLeft="8px";
There is no careful study on the case sensitivity issue.

The above is the entire content of this article, I hope it will be helpful to Everyone’s learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to generate an arithmetic sequence using JavaScript

The above is the detailed content of How to dynamically create divs using Js. For more information, please follow other related articles on the PHP Chinese website!