[HTML_CSS] JQ - prepend() 메서드 - 선택요소 안 시작부분에 내용 삽입 (= prepend메서드 = 프리펜드 메서드)

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

prepend() 예제 - 선택요소 안 시작 부분에 지정 내용 삽입

 

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

<script>

$(document).ready(function(){

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

    $("p").prepend("<b>강추</b> ");

  });

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

    $("ol").prepend("<li>HTML</li>");

  });

});

</script>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

<ol>

  <li>CSS</li>

  <li>JS</li>

</ol>

<button id="btn1">p 요소 안 앞에 추가</button>

<button id="btn2">ol 요소 안 앞에 추가</button>

 

결과보기

prepend() 정의

 

선택 요소 안 시작 부분에 지정 내용을 삽입.

 

---

 

1. cf.

append() 메서드 - 선택 요소 안 끝 부분에 지정 내용을 삽입.

 

2. 예제 더 보기

https://api.jquery.com/prepend/

 

prepend() 구문

 

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

또는,

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

 

---

[매개변수]

 

content1,content2, ...

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

※ 가능한 값 종류

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

 

function(index,html)

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

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

 

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

 

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

<script>

function prependText() {

  var txt1 = "<p>코딩언어 강의</p>"; // HTML 요소

  var txt2 = $("<p></p>").text("그누보드 강의");  // jQuery

  var txt3 = document.createElement("p");

  txt3.innerHTML = "서버관리 강의"; // DOM

  $("p").prepend(txt1, txt2, txt3);

}

</script>

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

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

 

결과보기

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

 

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

<script>

$(document).ready(function(){

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

    $("p").prepend(function(idx){

      return "<b>색인번호" + idx + "</b>. ";

    });

  });

});

</script>

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

<p>코딩언어 강의</p>

<p>그누보드 강의</p>

<button>클릭</button>

 

결과보기