[JavaScript] Element의 추가와 삭제

우선 메소드부터 간단하게 설명 드리겠습니다.
Document API
document.createElement() : 문자열 인자로써 괄호안에 Tag를 입력할시, 
해당 Element가 반환되게 됩니다.

Element API
.appendChild() : 괄호안에 입력된 Element를 호출된 
Element의 자식으로 추가합니다.
.removedChild() : 괄호안에 입력된 Element를 호출된
Element의 자식으로 추가합니다.
.insertBefore(A, B) : 괄호안에 입력된 A Element가 
B Element 바로 앞으로 추가되게 됩니다.
.cloneNode() : 호출된 Element를 복사(clone)합니다. 

 

document.createElement()를 이용하여
선을 만들고 Element로 추가하여 보겠습니다.

Console창을 보시면, hr 태그를 만들고,
hr 을 document.createElement("hr")로 정의한 것을 확인할 수 있습니다.
여기까지는 아직 Element를 추가 하지 않았기에,
웹 페이지에 적용이 되지 않습니다.
그 이후 body.appendChild(hr)을 이용해
body의 자식으로 추가하게 되면, 가장 아래에 <hr> 태그가
추가되는것을 확인 할 수 있고, 웹 페이지에도
선이 추가 된것을 확인 할 수 있습니다.

지우는 것도 마찬가지로
document.body.removeChild(hr); 을
콘솔창에 적기만 하시면 되겠죠???

하지만 이 두 메소드는 원하는 지점에 Element를 추가할 수가 없습니다.
원하는 곳에 추가하기 위해서 
insertBefore(); 메소드를 사용하여 보겠습니다.

document.body.insertBefore(hr, document.body.children[1]);을
사용함으로써, 괄호안의 첫번째 인자가, 두번째 인자 앞에 오도록 Element를 추가하게 됩니다.
그럼 위의 코드에서 body태그 안에 <h1>여행관련 명언들</h1>이 children[0]이 되고,
<h2>1. </h2> 가 children[1]이 되기때문에, <h2> 태그 앞으로 <hr>태그가 생성되게 됩니다.

여기서 주의하실 점은 hr을 하나만 정의해놓았기 때문에
선은 하나밖에 생성이 되지않습니다. 또다른 선을 생성하고 싶을경우, hr2를 hr.cloneNode를 이용하여 
똑같이 정의를 내린 후 사용하시면 됩니다.

 

감사합니다.