Js를 사용하여 div를 동적으로 생성하는 방법

이 글은 주로 특정 필드를 기반으로 한 PHP 2차원 배열의 중복 제거 또는 통계에 대한 팁을 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다.

원본 CSS입니다. 스타일

.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;}

동적으로 생성된 p 코드는 다음과 같습니다.

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); 
}

HTML에 p 요소를 추가합니다.
HTML에서 SPAN을 정의할 수도 있습니다.

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

IE와 Firefox 모두 이를 지원합니다.
또 다른 참고 사항입니다. 이것은 CSS 요소입니다.
플로팅 효과: float:left
IE의 코드: myp.style.styleFloat="left";
Firefox의 코드: myp.style.cssFloat="left";
CSS를 작성할 때 일반적으로 margin-left:8px입니다.
동적으로 추가할 때는 제거해야 합니다. - :myp.style.marginLeft="8px"
대소문자 구분에 대한 신중한 연구는 없습니다. issue.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

JavaScript에서 클래스를 호출하는 방법

JavaScript를 사용하여 산술 시퀀스를 생성하는 방법

위 내용은 Js를 사용하여 div를 동적으로 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!