icon_home

문서객체조작_3. 내용추가메서드

• DOM(문서객체모델)에서 문서안의 요소에 내용을 추가하거나 삭제를 할 수 있다.

• 실시간 순위 목록, 이미지 갤러리 누르면 창 나오게 하기

1. 내용 추가 메서드

• append(); : 사용자가 선택한 요소를 기준으로 안쪽 (부모 박스의 안쪽 형제 요소로 추가됨)으로 맨 뒤쪽에 내용을 추가

• prepend(); : 사용자가 선택한 요소를 기준으로 안쪽 (부모 박스의 안쪽 형제 요소로 추가됨)으로 맨 앞쪽에 내용을 추가

• after(); : 사용자가 선택한 요소를 기준으로 바깥쪽 (부모 박스의 바깥쪽 - 부모 요소의 형제로) 추가됨

• before(); : 사용자가 선택한 요소를 기준으로 바깥쪽 (부모 박스의 바깥쪽 - 부모 요소의 형제로 추가됨)으로 맨 앞에 내용을 추가

2. insertAfter();, insertBefore();

• insertAfter();, insertBefore(); 를 사용하면 A라는 요소의 앞쪽에 B라는 요소를 배치할 수 있고, B라는 요소의 뒤쪽에 A요소를 배치할 수도 있다.

• after();, before(); 메소드와 기능은 같지만 사용법이 다름

• $('A').after('B'); - A요소의 바깥쪽으로 뒤에 B내용을 추가한다.

• $('B').insertAfter('A'); - A요소의 바깥쪽으로 뒤에 B내용을 추가한다.

3. 내용 삭제 메서드(remove)

• 사용자가 선택한 요소의 내용만 제거하거나, 아예 태그요소를 삭제할 수 있다.

• remove(); : 사용자가 선택한 요소를 제거

• empty(); : 사용자가 선택한 요소의 내용만 제거

아래 remove버튼을 클릭하면 이 박스요소가 제거됩니다.
아래 empty버튼을 클릭하면 이 박스요소 안에 있는 내용만 제거됩니다.