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

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

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

• Change div order in CSS or javascript (CSS 또는 자바스크립트로 Div 순서 변경)

예시:

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

데모:

• http://jsfiddle.net/pg2fy5ua/
• http://jsfiddle.net/g18umwvr/

참고한 문서:

• How to getElementByClass instead of GetElementById with JavaScript? (자바스크립트에서 GetElementById 대신 getElementByClass를 사용하는 방법)
• Selecting second children of first div children in javascript (자바스크립트에서 첫 번째 div children의 두 번째 children을 선택하기)
• HTML DOM childNodes Property (HTML DOM childNodes 속성) - W3schools.com

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

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

• jQuery를 사용하여 요소(DIV) 위치 바꾸기

참고

https://avada.tistory.com/2279

워드프레스 수익형 블로그 만들기