[HTML] outerrHTML과 innerHTML

 오랜만에 포스팅합니다.

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

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

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

1. outerHTML

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

예제 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을 적용하면,

###javascript

var $targetHTML = $('div exampleTB table.useYN');

$targetHTML.outerHTML; // outerHTML

// 결과

###html

<table class="useYN">

<tbody><tr>

<td>

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

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

</td>

</tr>

</tbody></table>

결과 useYN 요소를 포함한 html이 모두 반환된다.

2. innerHTML

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

위의 예제 소스를 이용하여

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

###javascript

var $targetHTML = $('div exampleTB table.useYN');

$targetHTML.innerHTML; // innerHTML

// 결과

### html

<tr>

<td>

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

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

</td>

</tr> 

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