• 회원가입
  • 로그인

[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>

 

결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012