DOM Method & Property

메서드

다음 메서드들은 문서에 새로운 노드를 만들어 추가할 때 사용합니다.


◎ createElement

createElement 메서드는 특정 태그 내에 포함된 새로운 요소 노드를 만들 때 사용합니다. 이 메서드는 새로 만들어진 요소를 반환합니다.

									reference = document.createElement(element)		
								

이 메서드는 만들려고 하는 태그 명을 인수로 가집니다. 예

									reference = document.createElement("p")		
									reference = document.createElement("h1")		
								

createElement에서 반환된 reference는 노드 객체입니다. 이는 요소 노드이기 때문에 nodeType 프러퍼티의 값이 1입니다.

									var para = document.createElement("p");
								

앞의 예제이서 para.nodeType 값은 1이 됩니다. para.nodeName은 p나 P를 반환합니다.

일단 createElement로 만들어진 요소는 바로 문서 내에 추가할 수 있는 것이 아닙니다. 새 노드가 parentNode 프로퍼티를 가지고 있지 않으니까요. 자바스크립트에서 사용 가능한 문서 조각 형태로만 존재하고 이것을 문서에 실제로 추가하려면 appendChild 나 insertBefore 메서드("노드 추가하기" 참고) 혹은 replaceChild("노드 바꾸기" 참조)등을 사용합니다.

									var para = document.createElement("p");
									document.body.appendChild(para);
								

앞의 코드는 단락 요소를 만든 다음 body 요소의 lastChild로 새로 만든 단락 요소를 추가하는 예제입니다.

우리는 언제든 새로 만든 요소에 다른 메서드를 적용할 수 있습니다. 예를 들어 문서에 추가하기 전 요소에 속성을 부여하는 것이 가능합니다("노드 변경하기" 참고).

									var para = document.createElement("p");
									para.setAttribute("title", "단락 내용");
									document.body.appendChild(para);
								

물론 문서에 추가된 후에도 새로 만든 노드의 속성을 바꿀 수 있습니다.

									var para = document.createElement("p");
									document.body.appendChild(para);
									para.setAttribute("title", "단락 내용");
								

◎ createTextNode

createTextNode 메서드는 특정 텍스트를 포함하는 새 텍스트 노드를 만듭니다. 메서드는 새로 만들어진 텍스트 노드를 반환해 줍니다.

									reference = document.createTextNode(text)		
								

이 메서드는 만들어질 텍스트 문자열을 인수로 가집니다.

									reference = document.createTextNode("hello world!")		
								

createTextNode에서 반환되는 것은 텍스트 노드 객체입니다. 따라서 nodeType 프로퍼티 값은 3입니다.

									var message = document.createTextNode("hello world!");		
								

위의 예제에서 message.nodeType은 3을 반환합니다. message.nodeName는 "#text"를 반환해 줍니다.

일단 createTextNode로 만들어진 요소는 바로 문서 내에 추가할 수 있는 것이 아닙니다. 새 노드가 parentNode 프로퍼티를 가지고 있지 않으니까요. 자바스크립트에서 사용 가능한 문서 조각 형태로만 존재하고 이것을 문서에 실제로 추가하려면 appendChild 나 insertBefore 메서드('노드 추가하기' 참고) 혹은 replaceChild('노드 바꾸기' 참고) 등을 사용합니다.

									var message = document.createTextNode("hello world");
									var container = document.getElementById("intro");
									container.appendChild(message);
								

위의 코드는 hello world! 라는 새로운 텍스트 노드를 만든 후 id가 intro인 요소에 추가하는 예제입니다.

createTextNode 메서드는 주로 createElement와 함께 특정 태그와 그 안의 내용을 만들 때 함께 사용합니다.

									var message = document.createTextNode("hello world");
									var container = document.createElement("p");
									container.appendChild(message);
									document.body.appendChild(container);
								

위 코드는 hello world!라는 텍스트 노드를 만든 후 createTextNode 메서드가 반환해 주는 message 변수를 설정합니다. 그 다음에 createElement를 이용해 단락 요소를 만들고 container라는 변수에 저장합니다. 변수 message에 담긴 텍스트를 appendChild 메서드를 이용해서 변수 container라는 단락 요소에 추가합니다. 마지막으로 container를 문서의 body 요소 아래로 추가합니다.