[HTML_CSS] JQ - append() 메소드 ★★★ - 선택요소 안 끝부분에 내용 삽입 (= append메서드 = 어펜드 메서드)

목차

1. append() 예제 - 선택요소 안 끝 부분에 지정 내용 삽입
2. append() 정의
3. append() 구문
4. append() 예제 -  HTML, jQuery, DOM 사용해 삽입 내용 지정
5. append() 예제 -  함수 사용해 삽입 내용 지정

append() 예제 - 선택요소 안 끝 부분에 지정 내용 삽입

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("p").append(" <b> 코딩 강의</b>.");

  });

  $("#btn2").click(function(){

    $("ol").append("<li>JQ</li>");

  });

});

</script>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

<ol>

  <li>HTML/li>

  <li>CSS</li>

  <li>JS</li>

</ol>

<button id="btn1">text 추가 출력</button>

<button id="btn2">list 추가 출력</button>

결과보기 

append() 정의

 

선택 요소 안 끝에 지정 내용을 삽입 추가. 

 

---

 

1. cf.

prepend() 메소드 : 선택한 요소의 시작 부분에 컨텐츠를 삽입 

 

2. 예제 더 보기

https://api.jquery.com/append/

 

append() 구문

 

$(selector).append(content1,content2, ...)

또는,

$(selector).append(function(index,html))

 

---

[매개변수]

 

content1,content2, ...

필수. 삽입할 내용. (HTML 태그 포함 가능)

※ 가능한 값 종류

• HTML 요소
• jQuery 객체
• DOM 요소

 

function(index,html)

선택. 삽입할 내용을 반환하는 함수.

• index - 세트에서 요소의 인덱스 위치 반환.
• html - 선택 요소의 현재 HTML 반환.

 

append() 예제 -  HTML, jQuery, DOM 사용해 삽입 내용 지정

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

function appendText() {

  var txt1 = "<p>홈짱닷컴</p>"; // HTML 방식

  var txt2 = $("<p></p>").text("Homzzang.com"); // JQ방식

  var txt3 = document.createElement("p"); // DOM 방식

  txt3.innerHTML = "홈페이지 제작관리 강의";

  $("body").append(txt1, txt2, txt3);

}

</script>

<p>그누보드 서버관리 강의</p>

<button onclick="appendText()">text 추가 출력</button>

 

append() 예제 -  함수 사용해 삽입 내용 지정

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").append(function(n){

      return "<b> INDEX : " + n + ".</b>";

    });

  });

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>HTML</p>

<p>CSS</p>

<button>클릭</button>

 

결과보기