-
jQuery append 예제, remove 예제computer/JQuery 2014. 5. 25. 17:48
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ // 텍스트를 추가하는 함수
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){ // 리스트를 추가하는 함수
$("ol").append("<li>Appended item</li>");
});
$("#btn3").click(function(){ // 리스트에서 마지막 li요소를 지우는 함수
var index = $("ol").children().length-1; // 리스트의 마지막 인덱스를 가져온다.
$("li:eq("+index+")").remove();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list item</button>
<button id="btn3">Remove list item</button>
</body>
</html>
※ 참조 : www.w3school.com
'computer > JQuery' 카테고리의 다른 글
샘플코드 (0) 2016.05.20 jQuery fadeIn, fadeOut, fadeTo 예제 (0) 2014.05.24 location.href 와 location.replace() (1) 2014.05.20 JQuery selectbox Control 제어 (0) 2014.04.15