[펌] 태그 동적 생성 innerHTML > Html & Script

본문 바로가기
사이트 내 전체검색


회원로그인

오늘 114
어제 157
최대 618
전체 326,272
마음을 나누는 인터넷 일기장 - 통플 다이어리
Html & Script

[펌] 태그 동적 생성 innerHTML

페이지 정보

작성자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일16-01-06 13:01 조회3,668회 댓글0건

본문

원글 : 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]로 내용들을 감싸주는편이 더 보기 좋은것 같다.

 

 

추천 0

댓글목록

등록된 댓글이 없습니다.

Html & Script 목록

Total 187건 1 페이지
Html & Script 목록
번호 제목 글쓴이 날짜 조회 추천
공지 유니코드의 명칭과 속성 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 37763 38
186 CSS Text & Viewport units 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20 156 0
185 자바스크립트 replace / 문자열 변경하기 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-06 1843 0
184 날짜 및 시간 계산(JavaScript) 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-29 2068 0
183 동적으로 select의 option생성하기 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 2523 0
182 css ul li 가로 정렬 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-06 2199 0
181 자바스크립트 Attr 속성 추가 ,삭제, 조회하기 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 4446 0
180 오른쪽 마우스 클릭막기, 우클릭금지 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 2364 0
179 색상 코드표 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-19 2178 0
178 자바스크립트 in_array() 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-31 1506 0
177 (Jquery) radio checked 라디오 제어 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-21 2105 0
176 자바스크립트 날짜 차이 계산 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 1943 0
175 [AJAX] 1초마다 데이터 불러오기 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 2631 0
174 Load Results From Database On Page Scroll Using jQ… 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 2200 0
173 [CSS] placeholder 컬러바꾸기 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 2296 0
172 HTML 특수문자 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-30 3060 0
171 주소선택 스크립트 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-16 2142 0
열람중 [펌] 태그 동적 생성 innerHTML 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-06 3669 0
169 [펌] bootstrap 에서 modal + datepicker 사용시 안보이죠? 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 4317 0
168 폼 전송시 캐릭터셋이 틀릴때 인기글 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-07 4212 0
게시물 검색

Copyright © nuno21.net All rights reserved. 상단으로
모바일 버전으로 보기