본문 바로가기

자바스크립트를 사용하여 DIV 위치 순서 변경하기 [자체 정리용]

2019.07.11 댓글 7

jQuery를 사용하면 쉽게 DIV의 위치를 변경할 수 있습니다. jQuery 대신 자바스크립트를 사용하고 싶은 경우 다음 Statckoverflow 글을 참고할 수 있습니다.

예시:

var content = document.getElementById('FeaturedContent');
var parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);

DIV에 ID가 지정된 경우 위와 같이 document.getElementById를 사용하면 됩니다. 클래스(class)가 지정된 경우에는 다음과 같이 응용할 수 있을 것입니다.

var content = document.getElementsByClassName('content2')[0];

예시:

var content = document.getElementsByClassName('content3')[0];
var parent = content.parentNode;
parent.insertBefore(content, parent.childNodes[2]);

javascript에 까막눈이라 구글을 검색하여 급조해보았습니다. 구문에 오류가 있거나 잘못된 경우 댓글로 알려주시면 수정하겠습니다.

데모:

참고한 문서:

저는 업무상 필요한 것이 아니라 취미로 개인 블로그를 조금씩 수정하고 있기 때문에 자바스크립트 등을 체계적으로 배우는 대신 필요할 때마다 검색하여 해결하고 있습니다.ㅎㅎ

jQuery를 사용하면 정말 수월하게 DIV 위치를 바꿀 수 있습니다. 급한 경우 (사이트 성능에 미치는 영향을 무시할 수 있는 경우) jQuery를 사용할 수 있을 것입니다.

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글7