Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

jQuery 메소드:append()

jQuery:간략한 소개

jQuery는 개발자가 몇 줄의 코드로 DOM을 조작하고 이벤트 핸들러, 애니메이션 및 AJAX 요청을 작성할 수 있도록 하는 JavaScript 라이브러리입니다. 이것은 jQuery API에 고유한 선택기와 메서드를 사용하여 가능합니다. 이러한 방법 중 하나는 append()입니다. .

jQuery append()란 무엇입니까?

append() 메소드는 "콘텐츠"의 하나 또는 여러 인수(HTML 문자열, 텍스트, 배열, 요소 또는 그 이상의 jQuery가 될 수 있음)를 취하고 일치하는 일부 또는 모든 요소의 끝에 이를 첨부하거나 "추가"할 수 있습니다. 선택자. 몇 가지 일반적인 용도에는 목록 끝에 항목을 추가하거나(예:할 일 목록의 새 "할 일" 항목), 버튼 클릭 시 새 콘텐츠 표시가 있습니다. 이제 append() 일부 예제 코드와 함께 작동합니다.

제이쿼리 append() 사용 방법

할 일 목록에 항목을 삽입하는 위의 예를 보면 append() 선택기에서 호출되고 일치하는 모든 선택 항목에 내용을 삽입합니다.

기본 할 일 목록을 작성하는 HTML로 시작:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>To Do List</h2>
<ol class="list1">
<li>Read Chapters 1 & 2 </li>
<li>Meeting at 3:00pm</li>
<li>Write about yesterday's reading</li>
</ol>
</body>
</html>

<script> 내부에 jQuery API에 대한 주소를 포함하는 것이 중요합니다. <head>의 태그 HTML 페이지의. 그렇지 않으면 HTML 페이지에서 jQuery를 사용할 수 없습니다.

이제 할 일 목록이 멋지게 렌더링됩니다!

jQuery 메소드:append()

오늘 우리는 생산적이라고 느끼므로 목록 끝에 항목을 추가합시다. 저녁 식사 계획은 어떻습니까?

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

HTML 레이아웃을 참조하면 정렬된 목록(<ol> )에는 list1 클래스가 있습니다. . 다른 <script>를 추가하여 전체 선택 항목을 선택할 수 있기 때문에 이것은 좋은 소식입니다. :

하단에 태그 
<script>
 $(document).ready( () => {
   $(".list1").append("<li>Make dinner plans</li>")
 })
</script>

<script> 내부 태그에는 $ 기호가 있습니다. 이것들은 무엇입니까? 이들은 강력한 jQuery 선택기입니다.

요소, 클래스 이름 또는 ID 이름을 전달하여 DOM에서 무엇이든 선택할 수 있습니다. 이 경우 list1, 클래스가 있는 항목을 선택했습니다. 전체 <ol>를 선택합니다. 요소. 위의 (document) 선택자는 전체 페이지를 선택하고 ready()를 호출합니다. 페이지가 완전히 로드될 때까지 다음 코드 줄을 호출하기 위해 대기하는 메서드입니다. 이는 코드를 순차적으로 실행하는 데 도움이 됩니다.

이제 ready() 내부에서 콜백 함수에서 list1. 클래스의 모든 요소를 ​​선택했습니다. 이 경우 <ol> 가 선택됩니다. <li> 삽입 append()에 전달 닫는 </ol> 바로 위 . 따라서 페이지가 로드된 후 Make dinner plans 목록 항목이 할 일 목록에 추가됩니다.

jQuery 메소드:append()

환상적이야! 이제 다른 예를 살펴보겠습니다. 이번에는 버튼을 클릭하면 더 많은 콘텐츠를 표시해 보겠습니다.

jQuery append():실제 예제

웹 페이지에 버튼이 있고 버튼을 클릭할 때 새 콘텐츠를 표시하려고 한다고 가정합니다. 페이지 새로 고침이나 리디렉션 없이 새 콘텐츠를 표시하면 사용자에게 더 효율적이고 만족스러울 것입니다.

여기에 jQuery의 강력함과 우아함이 있습니다. :버튼을 클릭했을 때 새로 고침이나 리디렉션 없이 새 콘텐츠를 표시할 수 있습니다.

주어진 기본 HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="content">
  <p>Hello World!</p>
</div>
<button id="btn-main">Click Me!</button>
</body>
</html>

버튼이 있다는 점을 제외하고 할 일 목록을 시작한 방법과 매우 유사합니다.

jQuery 메소드:append()

jQuery에 대해 배운 내용을 사용하여 "Hello World!" 아래에 더 많은 콘텐츠를 추가해 보겠습니다. 버튼을 클릭하면

<script>
  $(document).ready( () => {
    $("#main-btn").click( () => {
      $("p").append("<b>Goodbye</b>")
    })
  })
</script>

다시 한 번, 끝에