jQuery에서 요소를 만드는 방법 알아보기

새 요소를 만드는 것은 jQuery JavaScript 라이브러리로 수행할 수 있는 가장 기본적인 작업 중 하나입니다. jQuery를 사용하면 DOM(문서 개체 모델)을 사용하는 동등한 접근 방식보다 작업이 훨씬 간단합니다. 또한 jQuery를 더 많이 사용할수록 더 유연하고 표현력이 풍부하다는 것을 알게 될 것입니다.

목적을 달성하려면 웹 페이지에 요소를 추가할 수 있어야 합니다. jQuery를 사용하여 새 목록 항목을 추가하거나 단락을 새 콘텐츠로 바꾸는 방법을 알아봅니다.

jQuery 란 무엇입니까?

jQuery 라이브러리는 자바스크립트 두 가지 주요 목표를 가진 코드:

일반적인 JavaScript 작업을 단순화합니다.
다양한 브라우저 간의 교차 호환성 JavaScript 문제를 처리합니다.

두 번째 목표는 버그를 해결하지만 브라우저 간의 구현 차이도 해결합니다. 브라우저가 시간이 지남에 따라 향상됨에 따라 두 가지 목표 모두 예전보다 덜 필요합니다. 그러나 jQuery는 여전히 가치 있는 도구가 될 수 있습니다.

요소란 무엇입니까?

요소를 태그라고도 합니다. 이 둘은 종종 같은 의미로 사용되지만 미묘한 차이가 있습니다. 태그는 리터럴을 나타냅니다.

또는

HTML 파일에 포함하여 텍스트 콘텐츠를 마크업합니다. 요소는 마크업된 텍스트를 나타내는 무대 뒤에서 객체입니다. 요소를 HTML 태그에 대응하는 DOM으로 생각하십시오.

jQuery를 사용하여 새 요소를 만드는 방법

대부분의 jQuery 작업과 마찬가지로 요소 생성은 달러 함수로 시작합니다. $ () . 이것은 핵심에 대한 지름길입니다. jQuery() 기능. 이 기능에는 세 가지 뚜렷한 목적이 있습니다.

일반적으로 문서에 이미 존재하는 요소와 일치합니다.
새 요소를 만듭니다.
DOM이 준비되면 콜백 함수를 실행합니다.

HTML을 포함하는 문자열을 첫 번째 매개변수로 전달하면 이 함수는 새 요소를 생성합니다.

$(' ')

이것은 요소 컬렉션을 포함하는 특수 jQuery 객체를 반환합니다. 이 경우 방금 만든 'a' 요소를 나타내는 단일 개체가 있습니다.

iTunes 백업 위치를 변경하는 방법 Windows 10

이 작업을 일치하는 요소와 구별하려면 문자열이 HTML처럼 보여야 합니다. 실제로 이것은 문자열이 다음으로 시작해야 함을 의미합니다. < . 이 방법을 사용하여 문서에 일반 텍스트를 추가할 수 없습니다.

이것은 문서에 요소를 추가하는 것이 아니라 추가할 준비가 된 새 요소만 생성한다는 것을 이해하는 것이 중요합니다. 요소는 '연결되지 않은' 상태로 메모리를 차지하지만 실제로는 아직 최종 페이지의 일부가 아닙니다.

더 복잡한 HTML 추가

달러 함수는 실제로 둘 이상의 요소를 생성할 수 있습니다. 실제로 원하는 HTML 요소 트리를 만들 수 있습니다.

$('one
two
three
')

이 형식을 사용하여 속성이 있는 요소를 만들 수도 있습니다.

$(' ')

새 요소에 속성을 설정하는 방법

전체 HTML 문자열을 직접 작성하지 않고도 새 jQuery 요소를 만들고 속성을 설정할 수 있습니다. 이는 속성 값을 동적으로 생성하는 경우에 유용합니다. 예를 들어:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';  
$(' ', { src: photo });

요소를 추가하는 방법

새 요소를 만든 후에는 여러 가지 방법으로 문서에 추가할 수 있습니다. jQuery 문서는 이러한 메서드를 다음 아래에 함께 수집합니다. '조작' 카테고리 .

기존 요소의 자식으로 추가

$('body').append($('Hello, world
'));  
$(document.body).append($el);

예를 들어 이 방법을 사용하여 목록 끝에 새 목록 항목을 추가할 수 있습니다.

기존 요소의 형제로 추가

$('p.last').after('A new paragraph
')  
$('ul li:first').before('new item
')

예를 들어, 다른 두 단락의 중간에 새 단락을 추가하려는 경우 좋은 선택입니다.

기존 요소 교체

다음을 사용하여 기존 요소를 새로 생성된 요소로 교체할 수 있습니다. 대체() 방법:

$('#old').replaceWith('New paragraph
');

기존 요소 둘러싸기

이것은 매우 드문 사용 사례이지만 기존 요소를 새 요소로 묶고 싶을 수 있습니다. 예를 들어 암호 랩핑하려는 요소 ~을위한 :

$('code#n1').wrap('

')

생성한 요소에 액세스

NS $ () 함수는 jQuery 객체를 반환합니다. 이는 후속 작업에 유용합니다.

$el = $('p'); $('body').append($el);

일반적으로 jQuery 프로그래머는 선행 달러 기호를 사용하여 jQuery 변수의 이름을 지정하는 경우가 많습니다. 이것은 단순히 이름 지정 체계일 뿐이며 $ () 기능.

jQuery를 사용하여 요소 만들기

네이티브 JavaScript 함수를 사용하여 DOM을 조작할 수 있지만 jQuery를 사용하면 훨씬 쉽게 조작할 수 있습니다. DOM을 잘 이해하는 것은 여전히 매우 유용하지만 jQuery를 사용하면 DOM을 훨씬 더 즐겁게 사용할 수 있습니다.

공유하다 공유하다 트위터 이메일 웹사이트의 숨겨진 영웅: DOM 이해하기

웹 디자인을 배우고 문서 개체 모델에 대해 더 알고 싶으십니까? 다음은 DOM에 대해 알아야 할 사항입니다.

다음 읽기 관련 항목

프로그램 작성
웹 개발
제이쿼리

저자 소개 바비 잭(게시된 기사 58건)

Bobby는 거의 20년 동안 소프트웨어 개발자로 일한 기술 애호가입니다. 그는 게임에 열정적이며 Switch Player Magazine에서 리뷰 편집자로 일하고 있으며 온라인 출판 및 웹 개발의 모든 측면에 몰두하고 있습니다.

바비 잭이 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.