jQuery: text(), html(), val()

jQuery/html

jQuery: text(), html(), val()

carrot62 2020. 7. 30. 18:50

Content 받아오기

text()
html()

$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});

.html()를 사용했을 때 : html content 그대 가져온다는 것을 알 수 있다

val()
- 자바스크립트에서 document.getElementById("id").value 를 간략하게 만든 것이다

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

attr() : attribute values를 받아온다

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

Content 세팅하기

text("text to set")
html("html content to set")
val("value to set")

Callback function

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i, origText2){
      return "Old text: " + origText2 + " New text: Hello world! (index: " + i + ")"; 
    });
  });

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

<p id="test1">This is a <b>bold</b> paragraph.</p>
<p id="test2">This is another <b>bold</b> paragraph.</p>

<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>

</body>
</html>

attr()
사용 예시) $("#id")attr("href", "new_url");