언어/JQUERY

JQuery 기본 예제 - append, prepend, after, before 차이

가을여행자 2025. 4. 24. 12:45
728x90
반응형

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn-append").click(function(){
    $("#target").append("<li>Appended Item</li>");
  });

  $("#btn-prepend").click(function(){
    $("#target").prepend("<li>Prepended Item</li>");
  });

  $("#btn-after").click(function(){
    $("#target").after("<p>After Target</p>");
  });

  $("#btn-before").click(function(){
    $("#target").before("<p>Before Target</p>");
  });
});
</script>
</head>
<body>

<h3>Target List</h3>
<ul id="target">
  <li>Existing Item</li>
</ul>

<!-- 버튼 4개 -->
<button id="btn-append">Append</button>
<button id="btn-prepend">Prepend</button>
<button id="btn-after">After</button>
<button id="btn-before">Before</button>

</body>
</html>

 

 

실행 결과

  1. 기본

2. Append

3. Prepend

4. After

5. Before

 

728x90
반응형
저작자표시 (새창열림)