TIL 20220823 - 89번

오늘은 어제 만들다 말았던 todo list의 마지막을 완성했다. 어제 html과 css를 완성했으니 오늘 js만 완성하면 됐는데 생각보다 어떻게 해야하나를 고민하다보니 오래 걸렸다.
내가 원하는 모양으로 만들기 위해서 시간이 걸리기도 했고 말이다.
아무튼 만들긴 만들었는데 뭔가 아쉬움이 있다.
시간적 여유가 더 많았으면 디자인도 한번 더 신경써서 만들었을 텐데.. 코드가 좀 더 깔끔하지 않았을까.. 더 부족한 부분을 채울 수 있지 않았을까 하는 것들
근데 그건 어느 것이나 무슨 일을 하든 항상 드는 생각이고 다음에 할 때 전에 했던 실수들을 줄여나가는 것이 사람으로서 성장한다고 생각한다.
아무튼 완성 했는데 프로젝트 땐 jQuery의 도움을 받았었는데 이번엔 순수 Vnilla JS로 해보느라 진땀을 흘렸다.

javascirpt를 사용하여 기존 HTML요소에 HTML콘텐츠 추가

이번엔 appendChild()와 insertAdjacentHTML()을 이용했다.

appendChild()

노드에 HTML 콘텐츠를 추가할 수 있는데 함수로 DOM의 콘텐츠를 교체하는 대신 기존 DOM 요소에 노드를 추가한다.

내가 사용한 코드

const wrap = document.querySelector('#list');
const parent = wrap.parentNode;
parent.appendChild(wrap, parent.lastChild);

그냥 코드만 딱 써놔서 무슨 말인지 모를 수 있다.

• wrap은 HTML에 작성한 list란 아이디를 가지고 있는 div
• parent는 그 wrap의 부모(상위)노드를 불러온다.(list를 감싸고 있는 부모요소 즉 list wrap)
• appendChild로 wrap을 paraent의 마지막 자식요소 뒤에 붙였다.
• 이 때 내 코드는 wrap이 원래 paraent 요소내에서 상위 자식 요소였으나 appendChild 때문에 맨 뒤로 옮겨졌다.
• 덕분에 특정 상황에 맨 위에 있는 리스트가 맨 아래로 이동될 수 있도록 만들었다.

insertAdjacentHTML()

HTML 구조의 지정 된 위치에 HTML 노드를 추가하려는 경우, 사용할 수 있다. 매우 유용하게 사용하였는데
position이 있었다.

• position : 매개변수에 4개의 값을 지원
  • beforebegin : 요소 시작 전에 HTML노드를 삽입
  • afterbegin : 선택한 노드의 여는 태그 바로 뒤에 요소를 삽입하고 첫번째 자식 앞에 배치
  • beforeend : appendChild()와 유사. 마지막 자식 바로 뒤에 요소 배치
  • afterend : 대상 HTML노드 태그가 닫힌 후의 위치를 나타냄
• String : 문자열 형식의 HTML을 두 번째 매개변수로 삽입 할 수 있다.
  • ex) <div>Hello World!</div>

내가 사용한 코드

const contain = document.querySelector("#container-list")
contain.insertAdjacentHTML("beforeend", tempHtml);

• contain은 list의 container
• 그 list 콘테이너의 beforeend, 마지막 자식 바로뒤에 tempHtml이라는 만들어놓은 div 변수를 넣어 사용하였다.
  

insertBefore

이것도 앞에 것들과 비슷한데 특정 위치 앞에 노드를 삽입하는 것이다

내가 사용한 코드

const wrap = document.querySelector('#list');
const parent = wrap.parentNode;
parent.insertBefore(wrap, parent.childNodes[2]);

• 앞에서 사용했던 코드 중 마지막 꺼만 바꿨는데 wrap과 parent는 동일하다
• insertBefore를 이용해 parent라는 요소의 자식 요소들 중에 3번째의 자식 앞에 wrap을 삽입한다는 코드
  (내가 구성한 코드에선 parent 요소에서 3번째 자식 코드부터 리스트의 1번째가 시작되니 3번째 앞에 넣어야 첫번째 리스트가 된다.)
• 덕분에 특정 상황에서 아래 있던 코드가 가장 첫번째로 올라올 수 있도록 만들 수 있었다.

오늘 한 일

가게일과...
Todolist 만들기!!