티스토리 뷰

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());
  });
});

.text() 사용 했을 때
.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");

 

'jQuery > html' 카테고리의 다른 글

jQuery: CSS classes, dimensions  (0) 2020.07.31
jQuery: add, remove  (0) 2020.07.31