configurer
288
2020-09-11 14:53:09
7
303

create element 반복 설정 = 스크립트 지저분 ? 해결방법이...


배너 제작할 때

<div>
  <img src="" />
</div>
<div>
  <div class="mask">
</div>


위 코드처럼 반복해야 하는 경우가 생기면

선배님들은 어떻게 처리하시나요 ?


저는 for문으로 돌려서 createElement + setAttribute + src 설정 + textContent 등등으로 설정하고 주석을 열심히 답니다. + eventlistener 추가해서 이벤트 추가하는 형식으로 진행합니다.


이렇게 하니까 html 코드 작성하는 부분은 깨끗한데 스크립트 작성하는 부분이 굉장히 길어지더라구요.

혹시 다른 좋은 방법 있으시면 키워드만이라도 공유부탁드리겠습니다 ㅠㅠ...

0
  • 답변 7

  • 유리세계
    3k
    2020-09-11 15:00:15

    원하시는 바를 잘 모르겠네요

    var html = '';
    html += '<div>';
    html += '  <img src="" />';
    html += '</div>';
    html += '<div>';
    html += '  <div class="mask">';
    html += '</div>';
    $('body').append(html);

    스크립트로 html 만들땐 보통 위처럼 처리하곤 합니다

  • configurer
    288
    2020-09-11 15:04:49

    유리세계

    답변 감사합니다.


    답변해주신대로 작성을 하게되면 총 6개의 배너가 들어가야 할 때  6 * 6 = 총 36번의 코드를 작성해야 하잖아요 ?


    그래서 제가 작성한 방법으로 교체를 했어요. for문으로 6번 돌려서 create element로 한번만 해주면 6개를 만들어주니까..


    근데 이럼에도 setting 해야할 것들이 많아지면 스크립트가 좀 길어지는 것 같아서..

    혹시 다른방법이 있나 여쭤본 겁니다 ^^

  • 바나코
    518
    2020-09-11 15:29:57

    잘모르지만 작성자님 코드대로라면 오히려 돔을 조작하는 함수를 호출하는곳에 자원을 더 사용하지 않을까싶어요. 유리세계님처럼 한번에 String으로 선언해서 append하는 편이 낫지않을까요? ㅎㅎ

  • configurer
    288
    2020-09-11 15:43:54

    밋꾸

    저두 저렇게 작성해봤는데 코드가 많이 길어지면서 관리하기가 귀찮아 지더라구요..

    src도 직접 파일명을 다 입력해줘야해서 바꾼건데 자원을 많이 낭비하는거면 다시한번 생각해볼 문제 같네요...ㅠㅠ


    의견 감사합니다 :D


  • 엡실론
    3k
    2020-09-11 15:54:52

    제가 상황을 잘 이해한건진 모르겠지만, 유리세계님 방식을 함수로 만들어서 설정 부분은 파라미터로 받으면 되지 않나요? 결국 컴포넌트화 해서 재사용하고 싶으신거 같은데, 서버에서 html template을 써도 되고, vue, react 같은 걸 써도 되고, 방법이야 많겠죠.


  • configurer
    288
    2020-09-11 15:54:53

    밋꾸

    추가 ) 아 그리고 가장 큰 이유는 createElement를 사용했을 땐 뭔가 코딩하는 느낌 ? 이지만 += 로 작성하게 되면 뭔가 타자연습하는 느낌 ? 이어서 ㅠㅠㅠㅠㅠㅠ


    너무 철없죠 ㅋㅋ

  • 바나코
    518
    2020-09-11 16:13:40

    ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그런이유로는 안대요!!

  • 로그인을 하시면 답변을 등록할 수 있습니다.