이번 장에서는 jQuery add에 대해서 알아보겠습니다.
jQuery add 요소에는 여러가지 함수가 있는데 append(), prepend(), after(), before() 에 대해서 알아보겠습니다.
append() 함수는 선택한 요소의 끝에 문구를 추가 할 수 있습니다.
prepend() 함수는 선택한 요소의 앞에 문구를 추가 할 수 있습니다.
after(), before() 의 역할은 선택한 모든 요소의 뒤,앞에 html 또는 javascript 구문등을 추가 할 수 있습니다.
append() 와 prepend() 의 간단예제
$("p").append("append 구문을 보여주세요.");
$("p").prepend("prepend 구문을 보여주세요.");
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Append 내용추가</b>.");
});
$("#btn2").click(function(){
$("ol").prepend("<li>prepend 내용추가</li>");
});
});
</script>
</head>
<body>
<p>첫번째 구문입니다.</p>
<p>두 번째 구문입니다.</p>
<ol>
<li>첫째줄</li>
<li>둘째줄</li>
<li>셋째줄</li>
</ol>
<button id="btn1">Append 버튼</button>
<button id="btn2">prepend 버튼</button>
</body>
</html>
// append와 prepend의 버튼이 각각 있는데 append 버튼을 클릭하면 "append 내용추가" 구문이 뒤에 나오는것을 확인 할 수 있으며,
prepend 버튼을 클릭하면 "prepend 내용추가" 내용이 앞에 나오는것을 확인 할 수 있습니다.
after() 와 before() 의 간단예제
$("img").after("after 구문추가");
$("img").before("before 구문추가");
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/jQuery/images/car.jpg" alt="jQuery" width="100" height="140">
<br><br>
<button id="btn1">before 버튼</button>
<button id="btn2">after 버튼</button>
</body>
</html>
// before 버튼과 after 버튼을 각각 클릭하면, before는 앞 구문에 after 는 뒤 구문에 문구가 추가 되는것을 확인 할 수 있습니다.
jQuery를 알아두면 실전분야에 적용할만한 내용이 많이 있습니다. 제가 설명하는 것은 기본중의 기본이지만 기본기가 튼튼하면 응용하고 적용하는데 전혀 문제될것이 없습니다.
다음 장에서는 jQuery remove 요소에 대해서 알아보겠습니다.
