afterbegin과 afterend를 지난 수요일에이어서 공부했다 이유는 footer도 만들어주고 싶은 마음에 시작했는데 이게 생각이상으로 편했기 때문이다. 우선 공식문서 내용을 참고해서 작성할 예정이다. afterbegin과 afterend이 메인은 아니고 실제 메인은
insertAdjacentHTML(position, text)이 부분인데 지정한 문자열을 원하는 요소의 위치에 넣어줄 수 있다.
position
요소에 상대적인 위치를 나타내는 문자열입니다. 다음 문자열 중 하나여야 합니다.
"beforebegin"
요소 앞. 요소가 DOM 트리에 있고 상위 요소가 있는 경우에만 유효합니다.
"afterbegin"
요소 바로 내부, 첫 번째 자식 앞.
"beforeend"
마지막 자식 다음에 요소 내부에 있습니다.
"afterend"
요소 뒤. 요소가 DOM 트리에 있고 상위 요소가 있는 경우에만 유효합니다.
text
HTML 또는 XML로 구문 분석하여 트리에 삽입할 문자열입니다.위 insertAdjacentHTML의 코드 부분의 설명이다.
let header = `헤더부분작성`
let footer = `푸터부분작성`
document.body.insertAdjacentHTML('afterbegin', header)
document.body.insertAdjacentHTML('beforeend', footer)이렇게 작성을 해주면 body태그 시작과 끝에 내가 작성해 준 header와 footer가 입력된다. 그래서 여러 html에 공통된 부분을 넣어주고 싶을 때사용하면 수요일 til처럼 간단하게 넣어줄 수 있고 유지보수도 저하나의 js만수정해 주면 돼서 편하다 그리고 저걸 만들 때 처음엔 html파일로 만들고 css도 같이 수정해 준 후에 common.css로 통일시켜 주는 방법이 있다. 편안.~
내 작성글을 예시로 보면
<!-- beforebegin 입력부분 -->
<body>
<!-- afterbegin 입력부분 -->
foo
<!-- beforeend 입력부분 -->
</body>
<!-- afterend 입력부분 -->이런 식이라 바디위아래로 입력되는 걸로 볼 수 있다. 바디는 밖으로 html태그를 두면 안 되는 걸로 알아서 다른 태그를 사용할 땐 beforebegin, afterend도 많이 사용할 거 같다.
오늘의 규파팡이 느낀 점!
수요일과 비슷한 느낌이지만 간단할 거 같았었고 수요일은 헷갈렸는데 공식문서 보니깐 이해하기 쉽게 설명이 돼있었다. 그래서 쉽게 이해하고 before와 after의 위치도 확실하게 알았다. 휴~!
'개발일지? > 내배캠' 카테고리의 다른 글
| 캠프 12주 2일차 TIL : Linux란? (0) | 2023.05.30 |
|---|---|
| WIL 11주차 - 내배캠 (0) | 2023.05.28 |
| 캠프 11주 3일차 TIL : javascript를 이용한 header 돌려 쓰기? (1) | 2023.05.25 |
| 캠프 11주 2일차 TIL : 스포티파이 검색API이용으로 노래 검색! (0) | 2023.05.23 |
| 캠프 11주 1일차 TIL : 월요일 좋아, Web Scraping과 API 활용 차이 (0) | 2023.05.22 |