div를 동적으로 추가하면 이상한 스타일 공유가 발생합니다.

Question

div를 동적으로 div에 추가 할 때 성가신 문제가 있습니다. appendChild 함수와 jQuery의 추가 함수를 사용해 보았습니다. 둘 다 같은 결과를 준다. 이 jsFiddle에서 문제를 볼 수 있습니다 당신은 '물건을 추가'버튼을 누르면

http://jsfiddle.net/debu/5b3Qr/

, 그것은 동적으로 생성 된 여러 된 div를 추가합니다. for-loop 내부에서 div를 생성 한 다음 "mainDiv"에 추가하기 전에 두 개의 텍스트 포함 div를 추가합니다. 그런 다음 for-loop 외부에서 두 개의 div를 추가로 만듭니다. 그 중 하나는 배경색이 밝은 오렌지색으로 설정된 스타일이 적용되어 있습니다.

for 루프에서 생성 된 div는 이후에 해당 배경의 요소에 이 추가 되었더라도이 오렌지색 배경색을 상속하는 것 같습니다. 그리고 오렌지색 배경 div가 오렌지색을 상속 한 후에 나타나는 단락과는 다릅니다. 그것은 그대로 있어야합니다, 흰색.

나는 이것으로 많은 것을 해왔고 그것을 해결할 방법을 찾지 못했습니다. 어떤 아이디어?

건배,

debu

Answer 1

이 밝혀 당신은 float:left을 신청 한 당신이 추가하는 (클래스 compHolder의) div의에 문제가 있었다. clear:both;으로 popupHeader3을 지워야 이상하게 행동하기 전에 세 div에 영향을 미치는 헤더의 배경을 중지해야합니다. 그래서 같이

:

.popupHeader3 { 
    background-color: #FFBA9B; 
    margin-top:1px; 
    color: #000000; 
    font-family: "ProximaNova"; 
    font-size: 18px; 
    clear:both; 
} 

참조 : http://jsfiddle.net/zyZ7Z/