[펌] 태그 동적 생성 innerHTML
페이지 정보
조회
15,423
본문
원글 : http://blog.naver.com/writer0713/220472890522
태그를 스크립트로 동적으로 생성해서 document에 붙일경우,
다음과 같이 생성한다.
1 2 3 4 5 6 | var footer = document.createElement("DIV"); footer.id = "this-is-footer"; footer.className = "this-is-footer-class"; footer.innerHTML = "<p>this is footer</p>" + "<a href='www.daum.net'>go daum</a>"; | cs |
innerHTML을 사용하여 태그 안의 내용을 집어넣는데 + 를 사용하여 여러 태그들을 붙이게 된다.
지금까진 나도 위처럼 사용했는데 오늘 새로운 방법을 보게되었다.
새로운 방법은 다음과 같다.
1 2 3 4 5 6 7 8 9 10 | var footer = document.createElement("DIV"); footer.id = "this-is-footer"; footer.className = "this-is-footer-class"; footer.innerHTML = [ "<p>this is footer</p>", "<a href='www.daum.net'>go daum</a>", "<span>this is span</span>", "<b>this is b tag</b>" ].join(""); | cs |
innerHTML을 사용하여 안에 들어가게 할 내용을 [array]로 감싸주고 해당 [array]를 마지막에 join메소드로 다 합쳐주는 방법이다.
물론 + 기호를 사용해서 해도 깔끔하게 정렬하면 보기좋게 할 수 있겠지만,
개인적으로는 두번째 방법처럼 [array]로 내용들을 감싸주는편이 더 보기 좋은것 같다.
[출처] [자바스크립트] 태그 동적 생성 innerHTML|작성자 Dreamy
관련자료
-
링크
등록된 댓글이 없습니다.
