createElement로 모달 빌드

Question

작은 프로젝트에서 나는 JavaScripts createElement 함수를 사용하여 작은 모달 폼을 만드는 데 관심이 있습니다. HTML을 배치하고 실제로 JS에서 코드를 작성했지만 슬프게도 올바르게 추가 할 수있는 모든 것을 얻지 못하는 것 같습니다.

html로는 다음과 같이 가정한다 :

<div id="qtModal"> 
    <div id="qtHead"> 
     <span id="qtHeading">Quick Tools</span> 
     <span id="qtClose">X</span> 
    </div> 
    <table id="qtWrapper" border="1"> 
     <tr> 
      <td id="qtRail"> 
       <ul> 
        <li><a class="qtLink" href="#">Delete</a></li>  
       </ul> 
      </td> 
     </tr> 
    </table> 
</div> 

다음과 같이 내가 이것을하고 몸에 추가하도록 설정 자바 스크립트는 다음과 같습니다

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

var qtHead = document.createElement("qtHead"); 
    qtHead.setAttribute("id", "qtHead"); 

var qtHeading = document.createElement("span"); 
    qtHeading.setAttribute("id", "qtHeading"); 
    qtHeading.textContent = "Quick Tools"; 

var qtClose = document.createElement("span"); 
    qtClose.setAttribute("id", "qtClose"); 
    qtClose.textContent = "X"; 

var qtWrapper = document.createElement("table"); 
    qtWrapper.setAttribute("id", "qtWrapper"); 
    qtWrapper.setAttribute("border", "1"); 

var qtTr = document.createElement("tr"); 

var qtRail = document.createElement("td"); 
    qtRail.setAttribute("id", "qtRail"); 

var qtUl = document.createElement("ul"); 

var qtLi1 = document.createElement("li"); 

var qtA1 = document.createElement("a"); 
    qtA1.setAttribute("class", "qtLink"); 
    qtA1.setAttribute("href", "#"); 

//We want to build the modal head right here 
qtHead = qtHead.appendChild(qtHeading); 
qtHead = qtHead.appendChild(qtClose); 
qtModal = qtModal.appendChild(qtHead); //Add to modal 

//Build the table from the inner most element up to the top 
qtLi1 = qtLi1.appendChild(qtA1); 
qtUl = qtUl.appendChild(qtLi1); 
qtRail = qtRail.appendChild(qtUl); 
qtTr = qtTr.appendChild(qtUl); 
qtWrapper = qtWrapper.appendChild(qtTr); 
qtModal = qtModal.appendChild(qtWrapper); //Add to modal 

$("body").append(qtModal); //Add to body 

내 논리는 우리입니다 먼저 헤드 요소와 닫기 버튼을 한 번에 하나씩 추가하여 헤드 요소에 추가하려고합니다. 그런 다음 실제 모달 요소에 헤드를 추가합니다. 다음으로는 가장 안쪽의 요소 (a)에서 가장 바깥 쪽 요소 (양식)까지 테이블을 작성한 다음 모달에 추가합니다. 위의 코드를 사용할 때 가장 안쪽의 요소 (a) 만 몸에 추가됩니다. 누군가가 내가 잘못하고있는 것을 지적하거나 (위의 예에서 createElement 또는 appendChild를 잘못 사용하고있을 수도 있음), 위에 나열된 적절한 HTML 구조를 생성하는 방법을 고칠 수 있다면 감사하겠습니다.

Answer 1

기본적으로 괜찮습니다. 추가 된 노드로 기존 노드를 덮어 쓰는 것이 문제입니다. 그 이유가 여기에 있습니다.

appendChild (...) 메서드는 방금 추가 한 DOM 요소를 반환합니다. 그래서, 때 qtHeading이 qtHead

qtHead.appendChild (qtHeading)에 추가됩니다

1. 가 qtHeading에 대한 참조를 반환 한 후 qtHead = qtHead.appendChild (qtHeading가),
2. qtHead이 qtHeading
로 덮어 쓰기됩니다 전화

qtHead = qtHead.appendChild(qtHeading); 
qtHead = qtHead.appendChild(qtClose); 
qtModal = qtModal.appendChild(qtHead); //Add to modal 

//Build the table from the inner most element up to the top 
qtLi1 = qtLi1.appendChild(qtA1); 
qtUl = qtUl.appendChild(qtLi1); 
qtRail = qtRail.appendChild(qtUl); 
qtTr = qtTr.appendChild(qtUl); 
qtWrapper = qtWrapper.appendChild(qtTr); 
qtModal = qtModal.appendChild(qtWrapper); //Add to modal 

을이로 재 작성 :

그래서

,이 문제를 해결하려면, 그냥이 걸릴

qtHead.appendChild(qtHeading); 
qtHead.appendChild(qtClose); 
qtModal.appendChild(qtHead); //Add to modal 

//Build the table from the inner most element up to the top 
qtLi1.appendChild(qtA1); 
qtUl.appendChild(qtLi1); 
qtRail.appendChild(qtUl); 
qtTr.appendChild(qtUl); 
qtWrapper.appendChild(qtTr); 
qtModal.appendChild(qtWrapper); //Add to modal