JavaScript/jQuery) outerHTML, lnnerHTML

outerHTML, innerHTML

HTML에서 제공하는 함수로, 자신을 포함한 HTML, 자신 하위의 HTML을 반환한다.

<div>
	<div id="selectedElement">Test</div>
</div>

<script>
	(function(){
    	var selectedElem = document.getElementById('selectedElement');
        console.log(selectedElem.outerHTML); // '<div id="selectedElement">Test</div>'
        console.log(selectedElem.innerHTML); // Test
    });
</script>

 

cf. innerTEXT : 내부의 텍스트를 반환한다.

 

cf. jQuery에서 innerHTML과 유사한 html() 함수는 제공하나, outerHTML 기능을 제공하진 않는다. 하지만 outerHTML함수와 같은 기능으로 동작하는 함수를 사용자 정의 함수로 구현할 수 있다.

$.fn.outerHTML = function () {
    return $(this).clone().wrapAll("<div/>").parent().html();
}

 선택한 요소를 div(다른 태그여도 상관없다.)로 감싸고, 이 div(선택한 요소의 parent)의 내부 html을 추출하는 방식이다.