6개의 li태그가 있고 li태그를 클릭했을 때 원하는 위치로 이동하도록 해본다.
그 전에 이동에 사용되는 함수는 노드의 생성에 사용될 수 있다는 걸 알아둔다.
[자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo
위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값
developefeel.tistory.com
append( ) - 마지막 위치로 이동
클릭된 li태그(this)를 menu아이디를 가진 태그의 제일 마지막 위치에 추가한다.
메뉴3을 클릭하니 마지막 위치로 이동했다.
insertBefore( ) - 특정 노드의 이전 위치로 이동
클릭된 li태그가 select클래스를 가졌다면 이벤트를 종료한다.
그게 아니라면 클릭된 해당노드(this)를
select클래스를 가진 노드($('.select'))의
이전(insertBefore)으로 이동한다.
메뉴2를 클릭하면 메뉴5의 앞 위치로 이동한다.
insertAfter( ) - 특정 노드의 이후 위치로 이동
before와 비슷하며 선택된 노드의 이후로 이동한다.
이번에도 메뉴2를 클릭하니 메뉴5의 뒤로 이동했다.
'Front-end > JavaScript' 카테고리의 다른 글
| [자바스크립트] html, text 메소드의 차이, 노드 내용 변경하기 (0) | 2022.05.26 |
|---|---|
| [자바스크립트] 노드 삭제하기, remove, html, even, odd (0) | 2022.05.26 |
| [자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo (0) | 2022.05.23 |
| [자바스크립트] js태그 안에서 원하는 태그 찾기, filter, find (0) | 2022.05.21 |
| [자바스크립트] DOM구조를 통한 태그 접근, Children, Contents, parent, prev, next, first, last (0) | 2022.05.21 |