[HTML_CSS] JQ - after() 메서드 - 선택요소 뒤에 내용 추가. (= after메서드 = 애프터메서드)

목차

1. after() 예제 - P 요소 뒤에 내용 넣기
2. after() 정의
3. after() 구문
4. after() 예제 - 매개변수 사용법

after() 예제 - P 요소 뒤에 내용 넣기

 

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

<script>

$(document).ready(function(){

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

    $("p").after("<p>놀러 오세요.</p>");

  });

});

</script>

<button>클릭</button>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

 

결과보기

 

after() 정의

 

선택요소 뒤에 지정 내용 삽입.

 

---

cf.

before() 메서드 - 선택요소 앞에 지정 내용 삽입.

 

 

after() 구문

 

$(selector).after(content,function(index))

 

---

[매개변수]

 

content

필수. 삽입할 콘텐츠 지정. (HTML 태그 포함 가능).

※ 가능값은 아래와 같음. (아래 예제1 참고)

・HTML 요소

・jQuery 객체

・DOM 요소

 

function (index)

삽입할 내용을 반환하는 함수. (아래 예제2 참조)

※ index - 요소 집합에서 요소의 인덱스 위치 반환.

 

 

after() 예제 - 매개변수 사용법

[예제1] HTML 요소, jQuery 객체, DOM 요소

 

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

<script>

function afterText() {

  var txt1 = "<b>Welcome</b>"; // HTML 요소

  var txt2 = $("<i></i>").text(" to ");  // jQuery 객체

  var txt3 = document.createElement("b");   // DOM 요소

  txt3.innerHTML = "my homepage.";

  $("#hz").after(txt1, txt2, txt3);    // 뒤에 요소 추가.

}

</script>

<button onclick="afterText()">클릭</button>

<p id='hz'>홈짱닷컴 Homzzang.com</p>

 

결과보기

---

[예제2]  요소 색인번호 반환 함수

 

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

<script>

$(document).ready(function(){

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

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

      return "<div>" + n + "번째 P요소.</div>";

    });

  });

});

</script>

<button>클릭</button>

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

<p>코딩언어 그누보드 강의</p>

<p>홈페이지 제작관리 강의</p> 

 

결과보기