텍스트 번 자바 스크립트를 사용하여 HTML 태그에 추가하지만, DOM 검사기

Question

 var input_choices = document.createElement("div"); 
    input_choices.setAttribute('id', "input_choices"); 





    for(var i=0;i<survey["questions"][1]["choices"].length;i++){ 

     var inputs = document.createElement("input"); 
     inputs.setAttribute('id',"inputvalue"); 
     inputs.setAttribute('type',"radio"); 
     inputs.setAttribute('name',"choice"); 

     var label = document.createElement("label"); 
     label.innerHTML = survey["questions"][1]["choices"][i]; 


     input_choices.appendChild(inputs); 
     inputs.appendChild(label); 
     console.log(label); 
     } 


    form.appendChild(form_title); 
    form.appendChild(input_choices);   
    q_card.appendChild(form); 
    main_content.append(q_card);  

이미지에 달리 코드는 위의 문제 메신저에 직면 보여줍니다. 레이블에 텍스트 값을 추가하고 입력 태그에 레이블을 추가했지만 표시되지 않았습니다.

Answer 1

레이블을 입력 하위로 추가하는 경우 입력에 하위 항목을 포함 할 수 없으므로 형제가되어야합니다. 범위 나 일종의 둘러싸는 요소로 둘 다 감싸고 그 요소를 input_choices에 추가해야합니다.

은 같은 것을 할 수 있어야한다 :

var wrapper = document.createElement('span'); 
wrapper.appendChild(label); 
wrapper.appendChild(inputs); 
input_choices.appendChild(wrapper); 

Answer 2

입력 요소는 아이를 가질 수 없습니다.

어느 다음 input 더 하위 없다한다 label또는

input의 자손되어야

• 에서, label 다른 곳에 있어야한다 (예 input의 형제 등) 및 label의 for 속성은 input

의 id과 일치해야합니다.3210

NB : 당신은 루프에서 inputs.setAttribute('id',"inputvalue");을 가지고 있지만 id는 문서의 독특한해야합니다

label.appendChild(inputs); 
input_choices.appendChild(label);