해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 문자열로 노드 제어
노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤었습니다.
그런데 이 방식은 복잡하고 장황하죠.
종류도 많고, 어지럽습니다.
좀 더 편리하게 노드를 조작하는 방법을 알아봅시다.
innerHTML
innerHTML은 문자열로 자식 노드를 만들 수 있는 기능을 제공합니다.
또한 자식 노드의 값을 읽어올 수도 있습니다.
예제로 살펴보도록 하겠습니다.
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="get();" value="get" />
<input type="button" onclick="set();" value="set" />
<script>
function get(){
var target = document.getElementById('target');
console.log(target.innerHTML);
}
function set(){
var target = document.getElementById('target');
target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
}
</script>
get 버튼을 누르면 콘솔창에 위와 같은 결과가 출력됩니다.
innerHTML 로 타겟의 하위 html 태그를 얻어온 것을 알 수 있습니다.
set 버튼을 누르면 아래와 같이 html 문서가 변하게 됩니다.
outerHTML
outerHTML은 선택한 엘리먼트를 포함해서 처리됩니다.
innerHTML 은 선택한 엘리먼트 하위의 엘리먼트들을 다뤘지만,
outerHTML 선택한 엘리먼트를 포함한다는 점에서 차이가 있습니다.
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="get();" value="get" />
<input type="button" onclick="set();" value="set" />
<script>
function get(){
var target = document.getElementById('target');
console.log(target.outerHTML);
}
function set(){
var target = document.getElementById('target');
target.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>";
}
</script>
get 버튼을 눌렀을 때의 결과는 아래와 같습니다.
타겟을 포함해서 출력하는 것을 알 수 있습니다.
set 버튼을 누르면 아래와 같은 결과가 출력됩니다.
innerText, outerText
innerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는
HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가합니다.
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="get();" value="get" />
<input type="button" onclick="set();" value="set" />
<script>
function get(){
var target = document.getElementById('target');
console.log(target.innerText);
}
function set(){
var target = document.getElementById('target');
target.innerText = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
}
</script>
get 버튼을 누르면 콘솔창에 태그가 아닌 텍스트만 나타나게 됩니다.
set 버튼을 누르면 아래와 같이 문서가 변합니다.
insertAdjacentHTML()
좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용합니다.
<ul id="target">
<li>CSS</li>
</ul>
<input type="button" onclick="beforebegin();" value="beforebegin" />
<input type="button" onclick="afterbegin();" value="afterbegin" />
<input type="button" onclick="beforeend();" value="beforeend" />
<input type="button" onclick="afterend();" value="afterend" />
<script>
function beforebegin(){
var target = document.getElementById('target');
target.insertAdjacentHTML('beforebegin','<h1>Client Side</h1>');
}
function afterbegin(){
var target = document.getElementById('target');
target.insertAdjacentHTML('afterbegin','<li>HTML</li>');
}
function beforeend(){
var target = document.getElementById('target');
target.insertAdjacentHTML('beforeend','<li>JavaScript</li>');
}
function afterend(){
var target = document.getElementById('target');
target.insertAdjacentHTML('afterend','<h1>Server Side</h1>');
}
</script>
코드가 조금 복잡해 보이지만, 하나하나 실행시켜 가면서 보겠습니다.
먼저 beforebegin 함수를 실행한 결과입니다.
target 이 시작되기 전에 h1 태그가 추가되는 것을 알 수 있습니다.
다음은 afterbegin
target 이 시작한 후에 바로 태그가 추가되는 것을 확인할 수 있습니다.
다음은 beforeend 실행결과 입니다.
target 이 끝나기 전에 태그가 추가됩니다.
마지막으로 afterend 입니다.
target이 끝나고 난 후에 h1 태그가 추가되는 것을 알 수 있습니다.
복잡해보여도, 나름 규칙이 있기때문에 대강 결과값을 예측할 수 있습니다.
이번 포스팅은 이렇게 문자열로 노드를 제어하는 방법에 대해 살펴봤습니다.
innerHTML 같은 경우 많이 쓰이기 때문에 알고 있었지만,
그 외의 것들은 생소해서 포스팅하면서도 많은 도움이 되었습니다.