[자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo

위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다.

 

jQuery없이 JS로 노드 생성

메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고

버튼이 클릭될 때마다 cnt값을 1씩 증가시킨다.

createElement를 통해 li태그를 생성해주는 li

createTextNode를 통해 li태그안에 텍스트 내용을 생성해주는 liText

getElementById를 통해 menu아이디를 가진 ul태그를 지정해 노드를 생성해줄 위치를 지정

만들어진 텍스트 노드를 li태그안에 appendChild를 통해 자식 노드로 붙여준다.

li태그를 menu, ul태그에 붙여주면서 노드를 생성한다.

버튼 클릭 시 ul태그안에 li태그가 새로 생성된다.

 

prepend( ) - 제일 앞 위치에 노드 생성

jQuery에서 제공하는 함수들은 훨씬 간단한 사용이 가능해진다.

prepend는 지정된 태그의 제일 앞 위치에 해당 마크업을 추가해준다.

메뉴1의 앞 위치부터 생성된다.

태그를 미리 만들어두고 사용하는 것도 가능하다.

 

prependTo( ) - 제일 앞 위치에 노드 생성

prepend의 두 번째 방식에서 주체와 객체의 위치를 바꿔서 사용하는 방식이다.

마찬가지로 제일 앞에서부터 노드가 생성된다.

 

insertBefore( ) - 지정된 위치의 이전 위치에 노드 생성

만들어진 객체를 제일 첫 번째에 위치한 li태그의 앞에 삽입한다.

li:first는 메뉴1이므로 그 이전 위치부터 노드들이 생성된다.

 

이번엔 li태그 중 select클래스를 가진 것의 앞 위치에 생성한다.

메뉴5의 앞 위치에 노드가 생성된다.

 

before( ) - 지정된 위치의 이전 위치에 노드 생성

insertBefore에서 주체와 객체의 위치만 변경하여 사용하며 효과는 같다.

select클래스를 가진 li태그인 메뉴5의 앞 위치에 노드가 생성된다.

 

insertAfter( ) - 지정된 위치의 이후 위치에 노드 생성

생성한 객체를 지정된 위치의 뒤에 추가한다.

메뉴5의 뒤에 노드가 생성된다.

 

after( ) - 지정된 위치의 이후 위치에 노드 생성

insertAfter에서 주체와 객체의 위치만 바꿔서 사용하며 효과는 같다.

메뉴5의 뒤에 노드가 생성된다.

 

append( ) - 제일 마지막 위치에 노드 생성

prepend와 다르게 지정된 노드의 제일 마지막위치에 자식노드로 추가된다.

제일 마지막에 새 li 태그가 생성된다.

 

appendTo( ) - 제일 마지막 위치에 노드 생성

append에서 주체와 객체의 위치만 바꿔서 사용한다.

제일 마지막 위치에 노드가 생성된다.

 

생성에 사용된 함수들은 노드의 이동에도 사용될 수 있다.

[자바스크립트] 노드 위치 변경하기, append, insertAfter, insertBefore

 

반복문을 이용해 여러 노드 생성하기

당연하지만 앞서 나열된 어떤 생성함수던 사용가능하다.

열 개의 노드가 제일 마지막 위치에서부터 생성됬다.

메소드를 여러번 호출한다는 것에 유의한다.

 

html( )을 이용해 노드 한번에 생성

본래 html함수는 지정된 태그의 내용을 체우는 용도다.

html함수가 마크업까지 다루는 것을 이용해 반복문으로 생성된 내용을 menu태그의 내용으로 체워넣는다.

본래 있던 태그는 사라지고 새로 만들어진 열 개의 태그가 대신한다.

메소드를 한번만 호출하여 여러 노드를 생성할 수 있다.