1.8 Using JavaScript Strings to Create and Add Element and Text Nodes to the DOM - skullkim | yunki kim

innserHTML, outerHTML, textContent, insertAdjacentHTML 프로퍼티는 js 문자열을 사용해서 노드들을 돔에 생성, 추가할 수 있게 해준다.

1
2
3
4
5
6
7
8
9
10
11

//create a strong element and text node and add it to the DOM
document.getElementById('A').innerHTML = '<strong>Hi</strong>';
/* create a div element and text node to replace <span id="B"></div> (notice span#B is replaced) */
document.getElementById('B').outerHTML = '<div id="B" class="new">Whats Shaking</div>'
   //create a text node and update the div#C with the text node
document.getElementById('C').textContent = 'dude';
//NON standard extensions below i.e., innerText and outerText
   //create a text node and update the div#D with the text node
document.getElementById('D').innerText = 'Keep it';
/* create a text node and replace the div#E with the text node (notice div#E is gone) */
document.getElementById('E').outerText = 'real!';
Colored by Color Scripter

cs

insertAdjacentHTML()메서드 같은 경우에는 Element 노드에서면 사용이 가능하다. insertAdjacentHTML()의 경우 원하는 위치에 노드를 삽입할 수 있다.

1
2
3
4
5

elm.insertAdjacentHTML('beforebegin', '<span>Hey-</span>');
elm.insertAdjacentHTML('afterbegin', '<span>dude-</span>');
elm.insertAdjacentHTML('beforeend', '<span>-are</span>');
elm.insertAdjacentHTML('afterend', '<span>-you?</span>');
 
Colored by Color Scripter

cs

innserHTML 프로퍼티는 스트링으로 넘겨인 HTML 요소를 실제 돔 노드들로 변환 한다. 하지만 textContent의 경우 오직 텍스트 노드들을 생성하는 대에만 사용된다. 만약 textContent를 사용할때 HTML 요소를 스트링으로 넘기게 되면 이는 실제 돔 노드로 변환되지 않고 스트링 노드가 된다.

document.write() 역시 노드를 생성하고 돔에 추가할 수 있다. 하지만 통상적으로 이는 서드파티 스크립트를 수행하야 하되는 것을 제외하면 사용되지 않는다. 기본적으로, wirte() 메서드는 페이지 로딩과 파싱 중에 전달된 값을 출력한다. wirte()를 사용하게 되면 로딩중이던 HTML 문서를 막게 된다.

innerHTML은 비싼 HTML 파서를 사용한다. 그에 반해 text node generation은 비용이 저렴하다. 따라서 innerHTML을 적게 사용하자.

insertAdjacentHTML의 beforebegin, afterend 옵션은 오직 해당 노드가 돔 트리에 존재 하고 부모 요소가 있을때만 사용할 수 있다.

outerHTML은 파이어폭스 11버전까지 지원하지 않는다.

textContent는 <script>, <style>을 포함한 모든 요소들의 내용을 가져온다. 그에 반해 innerText는 그러지 않는다. innerText는 style을 신경쓴다. 따라서 hidden element를 반환하지 않는다. 그에 반해 textContent는 이 역시 반환 한다.

FEATURED TAGS