주의할 점
element사이의 공백이나 줄바꿈도 child에 속하기 때문에 모두 검색된다.
nodeType 종류
ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12
DOCUMENT_POSITION_DISCONNECTED 1
DOCUMENT_POSITION_PRECEDING 2
DOCUMENT_POSITION_FOLLOWING 4
DOCUMENT_POSITION_CONTAINS 8
DOCUMENT_POSITION_CONTAINED_BY 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32
Node를 추가하기 위해서는 우선 document 객체의 기능을 이용하여 Element를 만들고 Text를 추가한 뒤 노드 추가를 해야한다.
Node 추가 API
예시
<! DOCTYPE html>
<html>
<body>
<ul id='target'>
<li>Javascript</li>
</ul>
</body>
<script>
//appendChild
var target = document.getElementById('target');
var li = document.createElement('li');
var text = document.createTextNode('append');
li.appendChild(text);
target.appendChild(li);
//insertBefore
var li = document.createElement('li');
var text = document.createTextNode('insertBefore');
li.appendChild(text);
target.insertBefore(li,target.firstChild);
</script>
</html>
제거하려는 노드의 부모 노드에서
removechild(target)을 사용해야한다.
예시
<! DOCTYPE html>
<html>
<body>
<ul>
<li id='target'>Javascript</li>
</ul>
</body>
<script>
var target = document.getElementById('target');
target.parentNode.removeChild(target);
</script>
</html>
replaceChild(newChild, oldChild)
예시
<! DOCTYPE html>
<html>
<body>
<ul>
<li id='target'>Javascript</li>
<li>CSS</li>
</ul>
</body>
<script>
var a = document.createElement('a');
a.setAttribute('href','url');
a.appendChild(document.createTextNode('google'));
var target = document.getElementById('target');
target.replaceChild(a,target.firstChild);
</script>
</html>
예시
<! DOCTYPE html>
<html>
<body>
<div id='target'>Javascript</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#target').before('<div>before</div>');
$('#target').prepend('<div>prepend</div>');
$('#target').append('<div>append</div>');
$('#target').after('<div>after</div>');
</script>
</html>
예시
<! DOCTYPE html>
<html>
<body>
<div id='target1'>Javascript</div>
<div id='target2'>HTML</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#target1').remove();
$('#target2').empty();
</script>
</html>
예시
<! DOCTYPE html>
<html>
<body>
<div id='target1'>Javascript</div>
<div id='target2'>HTML</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#target1').replaceWith('<div>replacewith</div>');
$('<div>replaceall</div>').replaceAll('#target2');
</script>
</html>
삽입
예시
<! DOCTYPE html>
<html>
<body>
<div id='target'>Javascript</div>
</body>
<script>
var target = document.getElementById('target');
target.insertAdjacentHTML('beforebegin','<div>beforebegin</div>');
target.insertAdjacentHTML('afterbegin','<div>afterbegin</div>');
target.insertAdjacentHTML('beforeend','<div>beforeend</div>');
target.insertAdjacentHTML('afterend','<div>afterend</div>');
</script>
</html>