[JavaScript]Node추가

첫번째 버튼을 클릭하면 callAppendChild라는 함수가 실행되는데

이 함수의 내용은 다음과 같다

1 .변수 target에 'target'이 아이디인 엘리먼트를 담고

2. 변수 li에 CreateElement라는 함수로 새로운 엘리먼트인 li를 만든다. 이때 객체는 document(왜냐하면 문서에 작성하기 때문)

3. 변수 text에 createTextNode라는 함수를 이용하여 text노드객체를 만들고 그 내용은 JavaScript

4. li에 appendChild를 통해서 text를 하위노드로 정함

  뭔 소리냐면 생성되어진 <li></li>태그 사이에 text객체인 javascript가 들어가서 <li>javascript</li>가 됨

5. 그 값은 ul태그인 target에 들어감

아래것은 insertBefore메소드를 통해서(li를 , target의 첫번째 노드(빈공백 역할을 하는 #TEXT 객체)전에 넣음

위 코드는 노드제거를 위한 것

특이한 점은

target.parentNode.removeChild(target);

해석해보면

id가 타겟인 엘리먼트 의. 부모노드. 에 자식노드를 삭제(id가 타겟인 엘리먼트)

뭔가 뺑 돌아가는 느낌이다.

removeChild를 이용하려면 부모노드를 알아야 하기 때문이다.

그러면 노드를 삭제하려면?

아직은 그 메소드가 없는 모양이다.

다음은 노드 변경이다.

callReplaceChild() 함수를 보자

위 3줄을 실행하면 다음과 같다

1. <a></a>

2. <a href="http://opentutorials.org/module/904/6701></a>

3. <a href="http://opentutorials.org/module/904/6701>Web browser JavaScript</a>

아래 두줄을 보자

4.  변수 target에 '#target'엘리먼트 리턴

5.  '#target'엘리먼트의 자식노드를 바꾸는데 ( 변수 a(<a href=>...</a>) 이거를, #target의 첫번째 자식)을 대신해서 바꾼다.

가 됨