Javascript로 특정 Element 안의 요소들을 wrapping 하기(Codeigniter)

방금 개발을 하던 중에 Codeigniter의 pagination을 사용하게 됐는데 create_links() 함수를 통해서 출력된 paging 결과에

부트스트랩의 pagination 클래스를 입히고 싶었다.

그래서 어떻게 할까 고민을 하다가 pagination으로 출력될 태그로 예상되는 것들을 추려서

자바스크립트로 화면이 로드될 경우에 해당 paging 영역에 있는 태그 들을 부트스트랩에 포맷에 맞는 형태로

태그를 교체하고 하이퍼링크 주소와 textContent를 대입하는 방식으로 해결했다.

var paging = document.getElementById('paging'); // 페이징 내용이 나올 article 태그의 id

var ul = document.createElement('ul'); // 부트 스트랩을 사용하기 위한 상위 ul 태그

ul.className = 'pagination'; // 부트 스트랩을 적용하기 위해서 클래스 이름을 변경한다.

// for문을 통해서 paging 아래에 미리 생성된 태그들의 개수만큼 루프를 돌게되는데 for(i = 0; i < paging.childElementCount; i++) { // 대문자의 결과가 나오더라 그래서 lowerCase로 고정해준다.

var tagName = paging.children[i].tagName.toLowerCase();

// 기본적으로 현재 링크인 경우에는 strong 태그가 나옴

if(tagName == 'strong') {

var li = document.createElement('li');

var a = document.createElement('a');

// 부트스트랩 적용을 위해서 생성한 태그에 이전 태그의 내용을 대입해준다.

a.textContent = paging.children[i].textContent;

li.innerHTML = a.outerHTML;

}

else if(tagName == 'a') {

var li = document.createElement('li');

var a = document.createElement('a');

a.textContent = paging.children[i].textContent;

a.href = paging.children[i].href;

li.innerHTML = a.outerHTML;

} // 이렇게 적용된 태그들을 ul 태그 하위 태그로 넣어준다.

ul.innerHTML += li.outerHTML;

}

// 최종적으로 paging 태그 안에 집어 넣으면 부트 스트랩의 css가 적용된다.

paging.innerHTML = ul.outerHTML;

from http://braintoast.tistory.com/16 by ccl(A) rewrite - 2020-03-06 20:55:03

codeigniter