만들어진 html 태그이동

워드프레스를 이용하면서 종종 html 어느 한부분만 옮겨야 할때가 있다
하지만 Templet & plugin 을 많이 사용하는 워드프레스 특성상 교치려면 파일을 뜯어서 교체해야한다.
그런데 파일을 뜯어서 교체할수있지만 php, json, js 각종 특별한 경우가 많다
그렇게 작업을하면 시간대비 효율이 엄청떨어지기 마련이다
웹마스터라면 금방금방할수있어야겠지만

지금은 웹마스터까지의 능력은 되지않기때문에 스크립트를 이용해서 html 구조를 변경하는 방법을 요약해서 정리해
놓아 보려한다.

예제 | 구조

나는 이런 구조가 있을때 change를 number1과 형제요소이고 number1보다 앞에 위치하게 하고싶다
첫번째
number1의 태그에 id를 만들어준다

 document.querySelector(".number1").setAttribute('id','mv');

두번째
옮길 태그, 기준 태그를 변수에 저장한다

 var movetag = document.querySelector(".change");
var standardtag = document.getElementById("mv");

세번째
태그를 옮겨준다

 standardtag.setAttribute('beforebegin',movetag);

끝!

사용된 JAVASCIPRT 설명

setAttribute 속성

선택자.setAttribute( ‘속성’ , ‘텍스트’ );
속성

• beforebegin : 선택자 앞에
• afterbegin : 선택자 자식요소 맨첫번째
• beforeend : 선택자 자식요소 맨마지막
• afterend : 선택자 뒤에

querySelector

선택자.querySelector(선택할것)