[Javascript] Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법

Study/Javascript, Jquery, CSS  2020. 3. 23. 15:17

안녕하세요. 명월입니다.


이 글은 Javascript에서 사용되는 Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법에 대한 글입니다.


Html에서 Javascript를 사용하게 되면 값을 취득하는 것 만큼 동적으로 생성하는 것도 많이 있습니다. 이유는 동적의 효과를 나타내기 위한 것도 있고, 사용자의 환경이나 액션(event)에 따라 페이지의 결과를 달리 나타낼 때 사용합니다.

가장 단순하게 요소를 생성하는 방법은 요소를 선택하고 innerHtml를 사용해서 Node의 값을 바꾸거나 outerHTML를 이용해서 태그 내용을 수정하는 방법이 있습니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <!-- 예제 요소 -->
  <span id="test1"></span><br />
  <span id="test2"></span>
  <script>
    // id가 test1인 요소를 선택한다.
    var $test1 = document.getElementById("test1");
    // id가 test2인 요소를 선택한다.
    var $test2 = document.getElementById("test2");
    // innerHTML은 태그 요소의 안쪽 html, 즉 <span></span>을 포함하지 않는 html를 재설정하는 것
    $test1.innerHTML = "<input type='text' id='test3'>";
    // outerHTM은 태그 요소를 포함한 html, 즉 <span></span>을 포함하여 html를 재설정하는 것
    $test2.outerHTML = "<input type='text' id='test4'>";
    // span#span1에서 id가 test3인 input을 설정했는데 그것을 재선택.
    var $test3 = document.getElementById("test3");
    // span#span2에서 id가 test4인 input을 설정했는데 그것을 재선택.
    var $test4 = document.getElementById("test4");
    // id가 test3인 요소에 value을 설정
    $test3.value = "hello world";
    // id가 test4인 요소에 value을 설정
    $test4.value = "good morning";
  </script>
 </body>
</html>

innerHTML과 outerHTML의 차이는 선택된 요소의 태그를 포함하느냐 안하는냐의 차이입니다. outerHTML로 html를 재설정하면 태그가 기존 span#item2가 사려졌습니다.

이 javascript에서 동적으로 요소를 추가하면 동적으로 움직이면서 바로 다시 javascript로 선택이 가능해 집니다.


사실 위처럼 요소를 생성, 추가해도 상관은 없습니다. 그러나 조금 더 폼나게 요소를 추가할 수 있습니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <!-- 예제 요소 -->
  <input type="textbox" id="test1" value="test1">
  <script>
    // 요소 생성 함수
    function createInput(cn) {
      // input 태그를 만든다.
      var $input = document.createElement('input');
      // 태그의 id를 설정한다.
      $input.id = cn;
      // 태그의 type을 설정한다.
      $input.type = "textbox";
      // 태그의 value를 설정한다.
      $input.value = cn;
      // 생성된 태그를 리턴한다.
      return $input;
    }
    // id가 test2이고 value가 test2인 textbox를 생성한다.
    $input = createInput("test2");
    // body에 가장 아래, 즉 </body>태그의 바로 위에 input 태그를 푸가한다.
    document.body.appendChild($input);
    // id가 test3이고 value가 test3인 textbox를 생성한다.
    $input = createInput("test3");
    // body안에 test1 id를 가진 태그 위에 추가한다.
    document.body.insertBefore($input, document.getElementById("test1"));
  </script>
 </body>
</html>

Javascript에서 이 요소의 재미있는 점은 스크립트인데도 불구하고 참조형으로 움직이는 것입니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <script>
    // 요소 생성 함수
    function createInput(cn) {
      // input 태그를 만든다.
      var $input = document.createElement('input');
      // 태그의 id를 설정한다.
      $input.id = cn;
      // 태그의 type을 설정한다.
      $input.type = "textbox";
      // 태그의 value를 설정한다.
      $input.value = cn;
      // 생성된 태그를 리턴한다.
      return $input;
    }
    // 요소를 생성한다.
    $input = createInput("test");
    // 요소를 추가한다.
    document.body.appendChild($input);
    // 이미 html에 요소를 추가한 후에도 value의 값을 변경하면 변경이 적용된다.
    $input.value = "hello world";
  </script>
 </body>
</html>

단순한 요소가 아닌 script나 style를 추가할 수도 있습니다.

<!doctype html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <script>
    // script를 추가한다.
    var $script = document.createElement('script');
    // jquery cdn 주소
    $script.src = "https://code.jquery.com/jquery-3.4.1.min.js";
    // 동기식으로 설정한다.
    $script.async = false;
    // head에 추가
    document.head.appendChild($script);
    // 스타일을 추가한다.
    var $style = document.createElement('style');
    // div태그의 글자색을 빨간색으로.
    $style.innerHTML = "div{color:red;}";
    // head에 추가
    document.head.appendChild($style);
    // jquery의 cdn을 다운로드하는 속도 계산 0.1초
    setTimeout(function() {
      // jquery - <div>hello world</div>를
      var $div = $("<div></div>").append("hello world");
      // body에 추가한다.
      $("body").append($div);
    }, 100);
  </script>
 </body>
</html>

이 CreateElement와 appendChild를 잘 사용하면 html 크기도 상당히 줄일 수 있는 효과도 있습니다.(대신 브라우저가 느려질 수 있습니다.)

그러나 이런 태그의 동적 설정을 너무 많이 사용하게 되면 소스의 가독성을 매우 떨어트리는 부작용도 있습니다.

즉, 태그에서 에러가 발생하게 되면 태그를 작성하는 스크립트를 찾는데 시간을 많이 쓰게 되는 역효과가 발생하는 것입니다. 그러면 생산성의 저하로 떨어지는 거고, 결국에는 품질과 관련이 되는 것입니다.


여기까지 Javascript에서 사용되는 Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법에 대한 글이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

'Study > Javascript, Jquery, CSS' 카테고리의 다른 글

[Javascript] 익명함수, 람다식, 클로저 그리고 callback (DOMContentLoadedd와 load이벤트 예제)  (0) 2020.03.25
[Javascript] 브라우저에서 Javascript 프로그래밍 디버깅하는 방법  (0) 2020.03.25
[Javascript] Html 요소(element)의 이벤트(Event)를 추가하는 방법  (0) 2020.03.24
[Javascript] Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법  (0) 2020.03.23
[Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...)  (0) 2020.03.23
[Javascript] 변수 선언, 제어문, 함수 사용법  (0) 2020.03.23
[CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드)  (0) 2020.03.13
[CSS] 색 스타일(color style) - 그라데이션(gradient)  (2) 2020.03.10