728x90
반응형
안녕하세요, 지난 시간에는 Javascript를 이용해 HTML 요소를 추가하는 것에 대해 정리하였습니다.
오늘은 요소 노드를 삭제하고 이동하는 것에 대해 추가로 정리해보겠습니다.
◆ 요소 노드 삭제
-. remove()를 사용하여 쉽게 삭제할 수 있습니다. 아래 코드를 보며 설명드리겠습니다.
<body>
<div>
<h1>오늘 할 일</h1>
<ol id="today">
<li>자바스크립트 공부</li>
<li>고양이 화장실 청소</li>
<li>고양이 장난감 쇼핑</li>
</ol>
<h1>내일 할 일</h1>
<ol id="tomorrow">
<li>자바스크립트 공부</li>
<li>뮤지컬 공연 예매</li>
<li>유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
<!-- JS -->
const myTag = document.querySelector('#today') // myTag는 #today 리스트가 된다
myTag.children[1].remove() // myTage의 자식 중 인덱스1인 <li>고양이 화장실 청소</li>가 사라진다!◆ 요소 노드 이동
-. 이전에 요소 노드를 추가할 때 사용하였던 prepend, append, before, after를 이용해 이동시킬 수 있습니다.
이해를 돕기 위해 코드 및 예시를 통해 설명드리겠습니다.
여기서 prepend, append 사용 시 요소의 중간으로 이동시킬 수가 없으므로 이동하고자 하는 요소의 자식인덱스에 after, before 함수를 사용하여 이동하여야 합니다!
<!-- JS -->
const myTag = document.querySelector('#today');
const target = document.querySelector('#tomorrow')
myTag.append(target.children[1]); // tomorrow의 1번 익덱스가 today의 맨 뒤에 추가된다
target.children[0].after(myTag.children[1]); // today의 1번 인덱스가 tomorrow의 0번 인덱스 뒤에 추가된다.
728x90
반응형
'Web 개발 > JS' 카테고리의 다른 글
| Javascript - 요소 노드 추가 (0) | 2021.06.28 |
|---|---|
| Javascript - innerHTML, outerHTML, textContent (0) | 2021.06.27 |
| Javascript - DOM (0) | 2021.06.26 |
| Javascript - CSS 선택자 선택 (0) | 2021.06.24 |
| Javascript - array(Quiz) (0) | 2021.06.22 |
댓글