[jQuery] get/set HTML content/attribute

    jQuery는 DOM(Document Object Model)을 조작하고 접근하기에 매우 편리한 방법을 제공한다. 이번 글에선 DOM에 접근하고 조작하는 법에 대해서 알아볼 예정이다.

Get content

    element의 text content에만 접근하기 위해서 text()를 사용한다. element의 HTML content 자체에 접근하기 위해서는 html()을 사용한다. 이외에더 form element의 value에 접근하려면 val()을 사용한다.

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Set content

    앞에선 element의 content를 가져오는 것을 배웠다 이번에 element의 content에 value를 set하는 것을 배운다. 간단하다. 위에서 봤던 text(), html(), val()에 set하려는 value를 인자로 넘겨주면 된다. 실제로 사용하면 아래와 같은 모습으로 사용될 것이다.

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});

$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});

$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

    element에 content를  set하려는 value를 만들기 위해 실행할 function을 정의하기 위해서 앞의 글에서 배운 callback을 이용한다. 여기서 사용하는 callback 함수는 두 개의  인자를 가진다. 첫번째 인자는 index로 $표시의 seletor로 가져온 element의 index를 나타낸다. 두번째 인자는 originalText로 이전에 가지고 있던 element의 value를 나타낸다. 새롭게 set할 value를 function의 return value로 사용하면 된다. callback을 사용할 때는 아래와 같다.

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 
  });
});

Get attribute

    element의 attribute를 사용하기 위해서 attr() method를 사용한다. 인자로는 사용하려는 attribute의 이름을 사용한다. attr()은 해당 이름의 attribute의 value를 반환한다.

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

Set attribute

    element의 attribute를 set하기 위해서도 attr() method를 사용한다. 단지 인자로는 set하려는 attribute의 이름을 첫번째 인자로 사용하고 두번째 인자로 set하려는 attribute의 value를 사용한다.

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3schools.com/jquery");
});

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3schools.com/jquery",
    "title" : "W3Schools jQuery Tutorial"
  });
});

    element에 attribute를  set하려는 value를 만들기 위해 실행할 function을 정의하기 위해서 앞의 글에서 배운 callback을 이용한다. content에 set할 때는 인자로 바로 callback 함수를 줬지만 여기선 attribute 이름을 먼저 인자로 넘기고 두번째 인자로 callback 함수를 준다. callback 함수는 두 개의  인자를 가진다. 첫번째 인자는 index로 $표시의 seletor로 가져온 element의 index를 나타낸다. 두번째 인자는 originalText로 기존에 가지고 있던 attribute의 value를 나타낸다. 새롭게 set할 value를 function의 return value로 사용하면 된다. callback을 사용할 때는 아래와 같다.

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

출처 : http://www.w3schools.com