국비수업13(HTML조작,속성변경)

자바스크립트&제이쿼리 국비수업(그린컴퓨터학원) 내용 중 HTML조작,속성변경, 이벤트에 대해 정리해본다

Jquery의 HTML조작과 속성변경 기능

기작성한 HTML 내용을 변경하는 경우

$(document).ready(function(){
$("#list3").append("<li>추가된 리스트6</li>");
$("#list3").prepend("<li>추가된 리스트1</li>");
$("#list3").append("<li>추가된 리스트7</li>");
$("#list3  li").eq(0).remove();
});

• $("#list3").append("
• 추가된 리스트6
"); : append();는 앞의 선택자 뒤에 ()의 내용을 추가하는 메소드이다
• $("#list3").prepend("
• 추가된 리스트1
"); : .prepend()는 앞의 선택자 앞에 ()의 내용을 추가하는 메소드이다

기작성한 tag의 속성을 변경하는 경우

$(document).ready(function(){
 var result = $(".link").attr("target");
  $(".link").attr("href", "정현진");
  $(".link").attr("target", "_self");
});

• $(".link").attr("href", "정현진"); : a링크의 속성명(href)을 "정현진"으로 바궜다
• $(".link").attr("target", "_self"); : a 링크의 속성을 제어하여 더 이상 링크를 클릭해도 새탭이 열리지 않도록 하였다