오랜만에 포스팅합니다.

포탈 관리자 작업하다가 아래와 같은 에러가 발생하여....

outerHTML 이 뭐지....???????  하는 궁금증이 생겨 알아보았습니다.

outerHTML을 설명하기위해 innerHTML과 비교하여 설명하겠습니다.

 * (html element).outerHTML : 현재 요소를 포함한 내부 html 전체를 반환한다.

###html

<div class="exampleTB">

<table class="useYN">

<tr>

<td>

<input type="radio" value="use">사용<br>

<input type="radio" value="unused">사용 안함

</td>

</tr>

</table>

<table class="job">

<tr>

<td>

<input type="radio" value="use">학생<br>

<input type="radio" value="unused">직장인

</td>

</tr>

</table>

</div> 

위의 예제 코드에서 현재 "useYN"을 기준으로 outerHTML을 적용하면,

 * (html element).innerHTML : 현재 요소는 제외하고 내부 html 전체를 반환한다.

위의 예제 소스를 이용하여

현재 "useYN"을 기준으로 innerHTML을 적용하면,

결과 useYN 요소를 제외하고 내부 html이 모두 반환된다.

 html 태그에 있는 정보들를 한번에 받아와 리스트 만드는 방법!

제목 붙이기가 어렵네요...

<예제 html>

### html

<ul class="list_org revertEnabled">

<li class="template" data-external-key="#externalKey#" data-name="#name#" data-email="#email#" data-type-code="#typeCode#" data-master-key = "${userindex}">

<div class="_eddrViewWrap">

<div class="eddrWrap">

<span class="eddrView" title="#email#">#name#&nbsp;</span>

<a href="#" class="btn_del"><img src="${url.context}/images/swp/common/b.gif" width="8" height="8" alt="삭제"></a>

</div>

</div>

</li>

</ul>

위의 태그에서 name, email, typeCode, externalKey 의 값을 받아와 map으로 만들려고한다.

원래 하던 방법은 jQuery를 이용해 해당 값들을 받아온 후 map으로 만들어야한다.

하지만 값을 받아오는 동시에 map으로 return하는 방법이 있다!!

바로 [selector].map(function() {...}).get() 을 사용하면된다.

### js

//  필요한 정보만으로 리스트 만들기

var $inviteMember = $('.list_org');

var _memberList = $inviteMember.map(function() {

var $this = $(this);

return {

name: $this.data('name'),

email: $this.data('email'),

typeCode: $this.data('typeCode'),

externalKey: '' + $this.data('externalKey') // int -> string

};

}).get();

위와 같이 사용하면 한번에 필요한 정보를 리스트로 만들어 사용할 수 있다!

그럼 다들 불금!