문서에 추가하기 전에 요소를 만들고 두 번째 요소를 추가하십시오.

Question

요소를 만들고 문서에 전달하기 전에 요소에 다른 요소를 추가하려고합니다. 내가 왜 내 코드가 작동하지 않을지 모르겠다. 다른 방법을 테스트 해 본다. 내가 만든 "A"요소를받을 필요가

var count = 0; 
 
\t function addElement() { 
 

 
\t \t count++; 
 

 
\t \t // Create plan element 
 
\t \t var newElement = document.createElement("li"); 
 
\t \t newElement.classList.add("collection-item"); 
 

 
\t \t var main = document.createElement("div"); 
 
\t \t var side = document.createElement("a"); 
 
\t \t side.classList.add("secondary-content"); 
 
\t \t main.appendChild(side); 
 
\t \t newElement.appendChild(main); 
 

 
\t \t // append element to plan layout 
 
\t \t planDesign.appendChild(newElement); 
 

 
\t \t // get values 
 
\t \t var exercise = newExcersise.value; 
 
\t \t var set = newSet.value; 
 
\t \t var rep = newRep.value; 
 
\t \t main.innerHTML = "<span>" + count + ".</span>" + exercise; 
 
\t \t side.innerHTML = "<span>Sets: </span>" + set + " <span>Reps: </span>" + rep; 
 
\t }

는 "DIV"에 삽입 할 수 있습니다.

Answer 1

당신은 같은 일을 수행하기 위해 두 개의 서로 다른 기술을 사용하고 당신이 당신이 말할 때 당신의 main 요소의 내용을 덮어 일으키는 :

main.innerHTML = "<span>" + count + ".</span>" + exercise; 

을 성공적으로 main에 side 요소를 추가 한 후.

가능할 때 일관성을 유지하십시오. document.createElement(), element.innerHTML 및 element.appendChild()을 사용하고 있습니다. 동일한 작업을 수행하는 방법이 다릅니다.

새 노드를 만들 때 DOM API를 사용하도록 코드를 변경하면 (연결된 문자열에서 HTML을 만드는 것과는 대조적으로) 요소 구성 및 이동 위치를보다 잘 제어 할 수 있습니다.

var spn = document.createElement("span"); 
spn.textContent = count + "."; 
main.appendChild(spn); 

var text = document.createTextNode(exercise); 
main.appendChild(text);