JS에서 새로운 요소를 추가하려면 1. 새로운 요소를 생성하고 2. 생성한 요소를 담고 있는 부모 요소에 접근해야 하며(DOM에 접근하기 위함) 3. 새 요소를 부모 요소의 콘텐츠에 삽입해야 한다.
<body>
<h1 id="first-title">hi!</h1>
<p>I'm new!</p>
<p class="highlight">
this is a
<a id="link" class="highlight" href="#">link</a>
</p>
</body>I’m new!라는 텍스트를 담고 있는 p태그에 a태그를 추가하려고 한다.
1. 새로운 요소 생성
let newElement = document.createElement('a');새로운 요소를 생성하려면 createElement메서드를 사용한다. 이 때 파라미터로는 추가하려는 요소의 이름만 넣어준다.
현재 이 요소는 메모리에만 저장이 되어 있기 때문에 DOM에 이것을 삽입하려면 2, 3단계를 더 거쳐야 한다.
2. 부모 요소에 접근
이는 단순히 접근만 하면 되므로 여러 가지 방법이 있다.
let firstParagraph = document.querySelector('p');querySelector는 CSS선택자에 의해 가장 먼저 선택된 요소를 반환한다.
3. 새 요소를 부모요소에 삽입
사용할 수 있는 메서드로는 append와 appendChild, insertBefore, prepend, appendTo 등이 있다.
(append와 appendChild의 차이는 이름에서 볼 수 있듯이 append는 노드 객체와 DOM 문자열을 자식 요소로 추가하지만 appendChild는 노드 객체만 추가할 수 있다. 또한 append는 아무런 반환 값이 없으나 appendChild는 반환 값이 존재한다.)
firstParagraph.append(newElement);이제 a태그가 HTML문서에 추가되었다. 하지만 아직 a태그에 아무런 작업도 취하지 않았기 때문에 페이지는 아무것도 달라진게 없으므로 텍스트와 href속성을 추가해야 한다.
newElement.href = 'https://google.com';
newElement.textContent = 'new link';
공부 정리용 블로그