자바스크립트를 이용하여 동적으로 HTML 요소(태그)를 생성하여 붙여 넣을 때는 새로운 요소를 생성하고, 생성한 요소를 현재 HTML 문서에 붙여 넣어야 한다. 흔히 새로운 요소를 생성만 하면, 자연히 기존 DOM 구조에 붙을 것이라 생각하지만, 독립적으로 생성만 한 상태이고 현재 HTML에는 붙어있지 않은 상태로 존재한다.
바로 예제를 만들어 볼 건데, 먼저 버튼을 생성할 것이다. 그리고 이 버튼을 클릭하면 새로운 HTML 요소를 생성하여 원하는 위치에 붙여 넣을 것이다. 특히 이번 예제에서는 아마도 친숙하지 않을 수 있는 iframe이라는 태그를 생성해 볼 생각이다. iframe은 현재 HTML 페이지에 다른 문서(다른 웹페이지)를 볼 수 있는 작은 창을 말한다. 쉽게 말해서 브라우저 안의 브라우저를 만들 수 있다. iframe 태그 형태는 아래와 같다.
<iframe src=”url 주소”> </iframe>
HTML 파트
아래 HTML처럼 작성하자. Line 1 – 3은 버튼을 만드는 부분에 해당한다. button태그 안의 onclick 속성을 보면, 클릭시 submit이라는 함수가 호출된다는 것을 알 수 있다. 이 submit 함수가 어디에 있는가 하면, 다음 섹션에서 작성할 자바스크립트에 위치한다. Line 4 – 6는 iframe 태그를 생성하여 넣을 자리에 해당한다. Line 5에는 div#iframeResult가 있는데, 이건 새로운 요소를 넣기 전에 표시할 내용으로, 나중에 새로운 요소랑 교체될 부분이다.
아래 구현 결과를 보면 “Load iframe”이란 이름으로 버튼이 만들어졌다. 하지만 아직 자바스크립트를 작성하지 않았기 때문에, 클릭을 해도 아무런 반응이 없을 것이다.
자바스크립트 파트
이번에는 자바스크립트 파트를 작성해 보자. 앞에 말한 것처럼 3 단계로 나눠서 구현할 것이다. 새로운 요소 생성 > 기존 요소 지우기 > 붙여넣기
요소생성 (JS Line 3 – 7)
요소를 생성할 땐 document 객체의 createElement 메소드를 사용한다. 그리고 태그 안에 속성(attribute)를 설정하기 위해 setAttribute를 사용한다.
- document.createElement
- 요소.setAttribute
기존 요소 지우기 (JS Line 10)
요소를 지우기 위한 가장 간단한 방법은 부모요소를 지정한 다음, 안에 있는 모든 부분을 지우는 방법이다. 안에 있는 부분은 innerHTML로 수정할 수 있다.
- document.getElementById(‘아이디이름’)
- 부모요소.innerHTML
붙이기 (JS Line 13)
요소를 생성했다고 웹페이지에 자동으로 붙여지는 것이 아니다. 요소만 독립적으로 생성만 되고, 현재 HTML 페이지랑은 별개의 상태로 존재한다. 새로 생성한 요소를 붙이기 위해서는, 부모요소를 지정한 뒤 appendChild 메소드를 이용하여 붙여줄 수 있다.
- document.getElementById(‘아이디이름’)
- 부모요소.appendChild(자식요소)
이렇게 함으로써 버튼을 클릭했을 때, 자바스크립트 안에 있는 function submit( ) 함수가 호출된다. 그리고 함수 내에서는 3가지 단계를 거쳐서 생성 > 지우기 > 넣기가 구현된다. 구현 결과에서 Load iframe 버튼을 클릭해 보자. 인터넷 로딩 시간이 조금 지나면 iframe 요소가 불러와지고 https://oursmalljoy.com이 뜬다.
1 2 3 4 5 6 | <div id=“button”> <button onclick=“submit()”>Load iframe</button> </div> <div id=“iframe”> <div id=“iframeResult” class=“dummy”>여기에 들어 갈 예정입니다.</div> </div> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function submit() { // 생성 let ifr = document.createElement(‘iframe’); ifr.setAttribute(‘id’, ‘iframeResult’); ifr.setAttribute(‘width’, ‘340’); ifr.setAttribute(‘height’, ‘200’); ifr.setAttribute(‘src’, ‘http://oursmalljoy.com’); // 지우기 document.getElementById(“iframe”).innerHTML = ”; // 넣기 document.getElementById(‘iframe’).appendChild(ifr); } | cs |
실제로 구현을 해보면, 웹페이지가 불러올 때까지 약간의 시간이 걸릴 것이다. 이런 시간의 지체가 있으면, 사용자는 프로그램이 오작동을 한다고 생각할 수 있다. 이러한 것을 막기 위해, 로딩 시간동안 스피너를 보여준다면 사용자는 로딩 중이라는 것을 알고 기다려 줄 것이다.
본문에 오류를 발견 했거나, 더 좋은 의견이 있으면 편히 코멘트를 달아 주시기 바랍니다. 좋은 토론의 장을 형성하고, 다른 분들에게도 큰 도움이 될 수 있습니다.
