innetHtml 속성이 CSS를 가져 오지 못합니다

Question

두 가지 형식의 html 페이지가 있습니다. 첫 번째 양식에 대한 CSS는 잘 작동합니다. 두 번째 형식은 innerHtml 속성에서 렌더링하는 것입니다. 그러나 CSS는 form2에서 작동하지 않습니다. 이것은 간단한 문제 일지 모르지만 나는 잘못 가고있는 것을 찾기 위해 붙어 있습니다. 누구든지 나를 도와주세요. 내 HTML 코드의 이미지를 첨부했습니다.

Answer 1

HTML의 각 비트를 별도로 연결하지 마십시오. 전체 양식을 포함하는 문자열을 구성하고이를 .innerHTML에 할당하십시오. 그 이유는 브라우저가 각각의 할당 후에 .innerHTML으로 HTML을 구문 분석하기 때문입니다. 닫히지 않은 태그가있는 경우 닫는 태그를 추가하여 "수정"합니다. 결과적으로 귀하의 <input> 요소가 양식 내에 존재하지 않습니다.

var quiz = document.getElementById("quiz"); 
var question1 = "<h3>Question 1</h3>"; 
question1 += "<form id='form2'>"; 
question1 += "<label><input type='radio' name='choices' value='a'> A</label>"; 
... 
question1 += "</form>"; 
quiz.innerHTML = question1;