01. append 함수 Show 문법 .append( content [, content ] ) append 함수는 선택한 요소의 내용의 끝에 새로운 콘텐츠를 추가할 수 있습니다. 예제 소스 <html lang="ko"> <head> <title>kkamikoon javascript</title> <script> $( document ).ready( function() { $( 'ul' ).append( '<li>Test3</li>' ); } ); </script> </head> <body> <ul> <li>Test1</li> <li>Test2</li> </ul> </body> </html> 결과 <body> <ul> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul> </body> 위와 같이 Test3의 태그가 하나 추가되는 것을 볼 수 있습니다. 02. append 함수 응용 이를 특정 id 값을 지정해주어 해당 요소에 값을 추가해줄 수 있습니다. 예제는 다음과 같습니다. 예제 소스 <script> function TestList() { var tmp = ""; tmp = tmp + "<li> It is Test </li>" $("test_list").append(tmp); } </script> <div id="test_list"></div> 위의 예제 소스에서 TestList 함수를 실행시키면 다음과 같은 결과값으로 HTML이 변경됩니다. 결과 <!--한 번 수행됐을 때--> <div id="test_list"><li> It is Test </li></div> <!--여러 번 수행됐을 때--> <div id="test_list"><li> It is Test </li><li> It is Test </li><li> It is Test </li></div> div와 div 사이에 append 하는 법! <div id="aa"> <div id="a"></div> <div id="c"></div> </div> <div id="b"></div> >> 이놈을 a와 b 사이에 넣을때 이전에는 $("#aa").prepend(html코드); 상위추가 $("#aa").append(html코드); 하위추가 로 사용 했지만!! 가운데 껴넣을 수 없었다. 하지만 !! $("#c").before(html코드); 상위추가 $("#a").after(html코드); 하위추가 위 방법을 쓰면 가운데에 쏙하고 넣을 수 있음!! 끗!! ‘생동감 있는’ 웹페이지를 만들기 위한 핵심은 DOM 조작에 있습니다. 이번 챕터에선 적시에 요소를 새롭게 생성하는 방법과 페이지에 있는 기존 콘텐츠를 어떻게 수정할 수 있는지 알아보겠습니다. 예제: 메시지 보여주기
예시:
위 예시에선 HTML을 사용해 메시지 창을 만들었습니다. 이번엔 같은 창을 자바스크립트를 사용해 만들어봅시다. 스타일은 HTML이나 외부 CSS 파일에 저장되어 있다고 가정하겠습니다. 요소 생성하기DOM 노드를 만들때 사용하는 메서드는 두 가지입니다. document.createElement(tag) 태그 이름(
document.createTextNode(text) 주어진 텍스트(
개발을 할 땐 위 예시(메시지가 들어가는 메시지 생성하기메시지가 들어갈
이렇게 세 단계를 거치면 요소가 만들어집니다. 그런데 요소를 만들긴 했지만, 아직 이 요소는 삽입 메서드
요소 삽입 메서드 전체 코드는 다음과 같습니다.
여기서는 자바스크립트에서 지원하는 노드 삽입 메서드는 다음과 같습니다. 적절한 메서드를 선택하면 직접 삽입 위치를 지정할 수 있습니다.
삽입 메서드엔 임의의 노드 목록이나 문자열을 넘겨줄 수 있습니다. 문자열을 넘겨주면 자동으로 텍스트 노드가 만들어집니다. 예시를 살펴봅시다. 스크립트가 실행되면 0, 1, 2에 더하여 새로운 글자들이 화면에 추가됩니다.
위 예시에서 사용된 각 메서드들의 역할을 그림으로 표현하면 다음과 같습니다. 최종 결과는 다음과 같아질 겁니다.
앞서 언급하긴 했지만, 이 메서드들을 사용하면 '복수’의 노드와 문자열을 한 번에 넣을 수도 있습니다. 문자열과 요소를 한 번에 삽입하는 예시를 살펴봅시다.
삽입 메서드에 문자열을 넘겨 텍스트 노드를 만들 땐 인수로 넘긴 문자열이 'HTML’이 아닌 ‘문자열’ 그 형태로 삽입된다는 점에 주의해야 합니다. 따라서 최종 HTML은 다음과 같습니다.
삽입 메서드를 사용하면 문자열은 따라서 노드 삽입 메서드는 DOM 노드나 문자열을 삽입할 때만 사용할 수 있습니다. 그런데 만약 insertAdjacentHTML/Text/Element또 다른 다재다능한 메서드
두 번째 매개변수는 HTML 문자열로, 이 HTML은 이스케이프 처리되지 않고 ‘그대로’ 삽입됩니다. 예시:
최종 HTML은 다음과 같습니다.
임의의 HTML을 페이지에 삽입할 땐 이 방법을 사용하면 됩니다. 아래는 매개변수에 따라 삽입 위치가 어떻게 변하는지를 표현한 그림입니다. 이 그림과 위쪽 그림이 꽤 유사하게 생겼네요. HTML을 삽입한다는 점만 다르고, 삽입 지점은 정확히 같다는 것을 관찰할 수 있습니다.
새롭게 배운 메서드
노드 삭제하기
일 초 후 메시지가 사라지게 해봅시다.
참고로, 요소 노드를 다른 곳으로 옮길 때 기존에 있던 노드를 지울 필요가 없습니다. 모든 노드 삽입 메서드는 자동으로 기존에 있던 노드를 삭제하고 새로운 곳으로 노드를 옮기기 때문입니다. 요소 위치를 바꾸는 예시를 살펴봅시다.
cloneNode로 노드 복제하기위 예시에서 기존 메시지 창과 유사한 메시지 창을 하나 더 띄워달라는 요구사항이 추가되었다고 가정해봅시다. '메시지 창을 만들어주는 함수를 하나 만들면 되지 않을까?'라는 생각이 떠오를 겁니다. 그런데 이 방법 말고도 기존에 만들어 놨던 복제하려는 요소가 클 때는 함수를 만드는 대신 복제를 사용하는 방법이 빠르고 간단할 수 있습니다.
DocumentFragment
문서에 있는 다른 노드를 예시를 살펴봅시다. 아래 함수
여기서 구식 삽입·삭제 메서드오래된 문법 이 정보는 개발된 지 얼마 안 된 스크립트가 아닌 오래된 스크립트를 이해하는 데 필요합니다. 하위 호환성을 유지하기 위해 남아있는 ‘구식(old school)’ DOM 조작 메서드도 있습니다. 아주 오래전에 만들어진 이 메서드들은 요즘에는 잘 사용하지 않습니다. 앞서 배운 모던한 메서드 그럼에도 불구하고 구식 메서드를 소개해드리는 이유는 작성된 지 오래된 스크립트에서 이런 메서드들을 발견할 수 있기 때문입니다. parentElem.appendChild(node)
아래 예시를 실행하면 새로운
parentElem.insertBefore(node, nextSibling)
아래 예시를 실행하면 새로운
parentElem.replaceChild(node, oldChild)
parentElem.removeChild(node)
아래 예시를 실행하면
이 메서드들은 모두 삽입하거나 삭제한 노드를 반환합니다. 'document.write’에 대한 첨언
사용법은 다음과 같습니다.
근래에 작성된 스크립트에선 이 메서드를 찾기 힘듭니다. 왜냐하면 페이지가 다 로드되고 나서 예시를 살펴봅시다.
이런 이유 때문에 아주 큰 단점이죠. 장점도 있습니다. 브라우저는 HTML을
‘읽는(파싱하는)’ 도중에 중간에 DOM 조작을 하지 않기 때문에 속도가 아주 빨라지죠. DOM 구조가 완성되기 전에 페이지에 내용이 삽입되기 때문입니다. 엄청나게 많은 글자를 HTML에 동적으로 추가해야 하는데 아직 페이지를 불러오는 중이고, 속도가 중요한 상황이라면 요약
|