언어/Javascript
[ Node ] 노드 변경 API
power-girl0-0
2021. 2. 10. 04:24
728x90
생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.
스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.
( 출처 : https://opentutorials.org/course/743inf.run/pBzy)
노드 추가
노드의 추가와 관련된 API들은 아래와 같다.
|
하지만, 노드를 추가하기 위해서는 추가할 element를 먼저 생성해야 하는데 이것은 document 객체의 기능이다.
아래 API는 노드를 생성하는 API이다.
|
아래 소스 코드는 노드를 생성하고 추가한 예제이다.
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
function callAppendChild(){
var target = document.getElementById('target');
var li = document.createElement('li'); //li 태그를 생성
var text = document.createTextNode('JavaScript'); //li태그에 담을 객체
li.appendChild(text);
target.appendChild(li); //target의 맨 뒤로 추가된다.
}
function callInsertBefore(){
var target = document.getElementById('target');
var li = document.createElement('li');
var text = document.createTextNode('jQuery');
li.appendChild(text);
target.insertBefore(li, target.firstChild);//target의 맨 앞으로 추가된다.
}
</script>
노드 추가 전
appendChild() 실행
insertBefore() 실행
노드 제거
노드 제거를 위해서는 아래 API를 사용한다.
이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의하자.
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
function callRemoveChild(){
var target = document.getElementById('target');
target.parentNode.removeChild(target);
}
</script>
실행전
실행 후
노드 바꾸기
노드 바꾸기에는 아래 API가 사용된다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
function callReplaceChild(){
var a = document.createElement('a');
a.setAttribute('href', 'http://opentutorials.org/module/904/6701');
a.appendChild(document.createTextNode('Web browser JavaScript'));
var target = document.getElementById('target');
target.replaceChild(a,target.firstChild);
}
</script>
실행 전
실행 후
728x90