jQuery DOM 조작 (DOM Manipulation)

요소 생성 및 추가 (Creating and Adding Elements)

jQuery를 사용하면 새로운 DOM 요소를 쉽게 생성하고 기존의 요소에 추가할 수 있습니다.

개념

DOM(Document Object Model)은 웹 문서의 구조화된 표현으로, jQuery를 통해 이를 쉽게 조작할 수 있습니다.

원리

jQuery는 $ 기호를 사용하여 DOM 요소를 선택하고, 다양한 메서드를 통해 해당 요소를 조작합니다.

함수들

append(): 선택한 요소의 자식으로 새로운 요소를 추가합니다.
prepend(): 선택한 요소의 첫 자식으로 새로운 요소를 추가합니다.
after(): 선택한 요소 바로 뒤에 새로운 요소를 추가합니다.
before(): 선택한 요소 바로 앞에 새로운 요소를 추가합니다.

예제들

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 새로운 요소 생성 및 추가
  let newElement = $("<p>새로운 문단입니다.</p>");
  $("body").append(newElement);
});
</script>

요소 제거 (Removing Elements)

jQuery를 사용하여 DOM에서 요소를 쉽게 제거할 수 있습니다.

개념

필요 없는 요소를 DOM에서 제거함으로써 웹 페이지를 동적으로 관리할 수 있습니다.

함수들

remove(): 선택한 요소와 그 자식 요소를 모두 제거합니다.
empty(): 선택한 요소의 모든 자식 요소를 제거하지만, 요소 자체는 남겨둡니다.

예제들

<script>
$(document).ready(function(){
  // 요소 제거
  $("#removeButton").click(function(){
    $("#elementToRemove").remove();
  });
});
</script>

요소 복사 (Cloning Elements)

jQuery를 사용하면 DOM 요소를 쉽게 복사할 수 있습니다.

개념

기존의 DOM 요소를 복사하여 새로운 요소로 재사용할 수 있습니다.

함수들

clone(): 선택한 요소를 복제합니다. 이벤트 핸들러도 복제하려면 true를 인자로 사용합니다.

예제들

<script>
$(document).ready(function(){
  // 요소 복제
  $("#cloneButton").click(function(){
    let clonedElement = $("#elementToClone").clone();
    $("body").append(clonedElement);
  });
});
</script>

요소 내용 변경 (Changing Content)

jQuery를 사용하여 요소의 내용을 쉽게 변경할 수 있습니다.

개념

DOM 요소의 텍스트나 HTML 내용을 동적으로 변경하여 사용자 경험을 향상시킬 수 있습니다.

함수들

text(): 요소의 텍스트 내용을 가져오거나 설정합니다.
html(): 요소의 HTML 내용을 가져오거나 설정합니다.

예제들

<script>
$(document).ready(function(){
  // 텍스트 내용 변경
  $("#changeTextButton").click(function(){
    $("#textElement").text("새로운 텍스트 내용입니다.");
  });

  // HTML 내용 변경
  $("#changeHtmlButton").click(function(){
    $("#htmlElement").html("<b>새로운 HTML 내용입니다.</b>");
  });
});
</script>

속성 (Attributes)

jQuery를 사용하여 요소의 속성을 쉽게 조작할 수 있습니다.

개념

DOM 요소의 다양한 속성(attribute)을 조작함으로써 동적인 웹 페이지를 구성할 수 있습니다.

함수들

attr(): 요소의 속성을 가져오거나 설정합니다.
removeAttr(): 요소의 속성을 제거합니다.

예제들

<script>
$(document).ready(function(){
  // 속성 변경
  $("#changeAttrButton").click(function(){
    $("#imageElement").attr("src", "newImage.jpg");
  });

  // 속성 제거
  $("#removeAttrButton").click(function(){
    $("#linkElement").removeAttr("href");
  });
});
</script>

Post Views: 73

jQuery DOM Manipulation