목차
prepend() 예제 - 선택요소 안 시작 부분에 지정 내용 삽입 prepend() 정의 prepend() 구문 prepend() 예제 - HTML, jQuery, DOM 사용해 삽입 내용 지정 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 태그 포함 가능)
※ 가능한 값 종류
function(index,html )
선택. 삽입할 내용을 반환하는 함수.
index 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>
결과보기
