노드 내용 읽기 및 변경

노드를 대량으로 추가하거나 삭제해야 하는 경우는 노드 내용을 직접 변경하는 방법을 사용한다.

 

 

01_소개

노드 내용이란? 노드 내부에 들어 있는 마크업 노드와 텍스트 노드 정보를 문자열로 표현하는 것을 의미한다. 

 

노드 내용은 서버에 보내거나 노드를 다루기 위한 용도로 많이 사용한다. 

 

02_노드 내용을 문자열로 읽기

$대상.html()
$대상.text()

노드 내용을 알아내는 방법은 html() 메소드와 text()메서드 두 가지가 있다. 이 둘은 차이점이 있다. 

 

html() 메서드를 이용하면 특정 노드의 내부 내용을 마크업까지 확인 할 수 있다. 주의해야 할 사항이 있는데 html()메서드 결과는 자바스크립트 DOM객체가 아닌 단순한 문자열이라는 점이다. 또, 노드 내용에는 자신의 태그 저보는 포함하지 않고 오직 자식을 포함한 자손 노드 정보만이 사용된다.

 

가끔 노드 내용 중 마크업 내용을 제외한 텍스트 노드의 내용만을 문자열로 구해야 할 때가 있다. 이때는 html()메서드 대신 text()메서드를 사용하면 된다.

 

03_노드 내용을 수정하기

$대상.html(수정할 태그 문자열)
$대상.text(수정할 텍스트)

04_노드 내용을 이용해 여러 개의 자식 노드 추가하기

$대상.html("추가할 태그 문자열")

노드를 대량으로 추가해야 하는 경우에는 여러 노드의 청보를 하나의 문자열로 만들어 html() 메서드를 이용해 처리한다. 이 경우에는 append()보다 html()메서드를 이용하는게 훤씰 빠르다. 

 

05_노드 내용을 이용해 모든 자식 노드 추가하기

$대상.html("")

자식 노드를 모두 지우고 싶을 때 remove()메서드 대신 html()메서드를 이용하면 좀 더 효율 적이다.