-
jQuery를 쓰지않고 DOM 노드 이동시키기웹 프로그래밍/FE(Front-End) 2021. 6. 15. 16:58
오늘은 프로젝트를 진행하면서 사용했던 것중 정리해볼만한 내용이여서 글을 쓰려고 한다.
프로젝트의 기획서에서 요구사항은 jQuery를 사용하지 않고, querySelector, addEventListener, innerHTML을 사용해서 DOM, EVENT 처리하는 것이다. 내가 구현해야했던 사항은 하나의 div 내에 있는 자식 노드 하나를 다른 div의 자식노드로 옮기는 것이다.
인터넷을 찾아본 결과, jQuery를 사용한 글이 많았다.
하지만, jQuery를 쓰지 못하는 제한사항이 있기에 다른 방법을 찾아보던 중 jQuery를 쓰지 않고도 노드를 이동시키는 방법을 알았다.
바로 appendChild() 내장메소드이다.
appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킨다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없다.)
설명으로 보면 이해가 어려우니 코드와 구현결과를 보자.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="NewFile.css"> <title>Insert title here</title> </head> <body> <div id = "div1"> <p id= "p1">옮길 요소입니다.</p> <button id = "btn1">누르면 요소 이동</button> </div> <div id = "div2"> </div> </body> <script src="jsfile.js"></script> </html> ''' // NewFile.css #div1 { background-color: lightgray; border: 2px black solid; padding: 30px; } #div2 { background-color: yellow; border: 2px black solid; margin-top: 20px; padding: 30px; } '''위의 코드로 간단한 페이지를 구현해보면 아래의 페이지가 나올 것이다.
id=div1인 div노드의 자식노드로 <p>요소가 있고 id=div2인 div에는 자식 노드가 없다.
이제, "누르면 요소 이동" button을 누르게 되면 appendChild를 통해
"옮길 요소입니다."텍스트를 가진 <p>요소가 div1에서 div2로 이동하게 된다.
여기서 div1에 있는 "옮길 요소입니다."텍스트를 가진 <p>요소가 복사되어서 div2의 자식 노드로 이동하는 것이 아니라
그 자체가 div2의 자식노드로 이동하므로 문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없다는 설명이 있는 것이다.
구현 영상과 JS코드를 보자.
var button = document.getElementById("btn1") button.addEventListener('click', function(event) { var move_el = document.getElementById("p1"); //옮길 요소 var div = document.getElementById("div2"); // 옮기고자하는 부모노드 div.appendChild(move_el); });위에 위치한 div(id = div1)에서 아래의 div(id=div2)로 요소가 옮겨진 것을 볼 수 있다.
그리고 원래 있던 위에 위치한 div(id= div1)에는 해당 요소가 없어진 것을 볼 수 있다.
이렇게 appendChild()로 요소의 위치를 변경시키면 단순히 현재의 페이지에서만 바뀐 것으로 새로고침을 하면 다시 원래상태로 돌아간다.
appendChild() 메서드를 더 알고싶다면 아래 사이트를 참고하면 좋을 것같다.
https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild
Node.appendChild() - Web API | MDN
Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는
developer.mozilla.org
'웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글
AJAX 파헤치기 (add. 동기/비동기) (0) 2021.06.21 DOM Node 조작해보기(DOM API) (0) 2021.06.19 [JS] Spread Operator 알아보기 (0) 2021.06.16 JS(JavaScript)와 Web UI 개발 (0) 2021.06.02 HTML과 CSS (0) 2021.05.27