DOCTYPE HTML>
<HTML 긴=“en”>
<머리>
<메타 문자 집합=“UTF-8”>
<메타 성=“뷰포트” 내용물=“너비 = 장치 너비, 초기 스케일 = 1.0”>
<제목>자바스크립트 요소제목>
<지름길 친척=“스타일 템플릿” 헥사=“../../css/reset.css”>
<지름길 친척=“스타일 템플릿” 헥사=“../../css/dark.css”>
<스타일>
#목록1 > 왼쪽 {
넓은: 100픽셀;
키: 100픽셀;
가장자리: 10px 자동차;
배경색: 연두색;
색상: 선박;
글꼴 크기: 2시;
텍스트 정렬: 센터;
행 높이: 100픽셀;
}
스타일>
머리>
<몸>
<울 ID=“목록1” 수업=“회색 상자”>
<왼쪽>하나왼쪽>
<왼쪽>2왼쪽>
<왼쪽>삼왼쪽>
울>
<스크립트>
// HTML 요소 이동
// – 화면에 보이는 요소(DOM에 연결된 요소)
// 주어진 요소의 마지막 자식으로 이동
// – 이동할 항목 검색
// 주어진 요소의 마지막 자식으로 추가
// → 추가 시 검색된 요소는 다시 생성되지 않습니다.
// 마지막 자식으로 이동합니다.
// 예) 교실 앞쪽에 의자를 뒤쪽에 놓으세요!
// #목록1 항목
바르 목록1 = 문서.getElementById(“목록1”);
// #list1 요소의 첫 번째 자식
바르 첫 번째 = 문서.쿼리 선택기(“#list1 > li:first-child”);
// 2초 후 #list1 요소의 첫 번째 자식
// #list1 요소의 마지막 자식으로 이동
창문.setTimeout(기능() {
목록1.아이를 붙이다( 첫 번째 );
}, 2000년);
스크립트>
몸>
HTML>