🐧text 메소드와 html 메소드
📌$(selector).text() : 검색 태그의 태그내용을 반화하는 메소드
→ HTML 태그를 제외한 태그내용 반환
alert("결과 = "+$("#displayDiv").text());//결과 = text 메소드와 html 메소드
📌$(selector).html() : 검색 태그의 태그내용을 반화하는 메소드
alert("결과 = "+$("#displayDiv").html());//결과 = <p>text 메소드와 html 메소드</p>
📌$(selector).text(value) : 검색 태그의 태그내용을 변경하는 메소드
→ 변경될 태그내용에 HTML 태그가 포함된 경우 일반 문자값으로 처리
$("#displayDiv").text("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>");
📌$(selector).html(value) : 검색 태그의 태그내용을 변경하는 메소드
→ 변경될 태그내용에 HTML 태그가 포함된 경우 HTML 태그로 처리
$("#displayDiv").html("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>");
📌묵시적 반복에 의해 검색된 모든 태그가 동일한 태그내용으로 변경
$("h3").text("jQuery 메소드 연습 - 변경");
─────────────────────────────────────📌명시적 반복에 의해 검색된 모든 태그를 차례대로 제공받아 서로 다른 태그내용으로 변경
$("h3").each(function(i) { $(this).text("jQuery 메소드 연습 - "+(i+1)); });
📌text 메소드와 html 메소드를 사용하여 태그내용을 변경할 경우 변경값 대신 콜백함수를 전달하여 콤백함수의 반환값으로 태그내용 변경 가능
→ 콜백함수는 검색된 태그의 갯수만큼 반복 호출 - 명시적 반복
→ 콜백함수에 매개변수를 선언하여 처리 태그의 첨자와 태그내용을 제공받아 콜백함수에서 사용 가능$("h3").text(function(index, content) { //return "jQuery 메소드 변경 - 변경";//콜백함수의 반환값으로 태그내용 변경 - 필수 });
─────────────────────────────────────$("h3").text(function(index, content) { //return "jQuery 메소드 변경 - 변경"+(index+1); return content+" - "+(index+1); });
📃09_text.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <h1>text 메소드와 html 메소드</h1> <hr> <div id="displayDiv"><p>text 메소드와 html 메소드</p></div> <hr> <h3>jQuery 메소드 연습</h3> <h3>jQuery 메소드 연습</h3> <h3>jQuery 메소드 연습</h3> <h3>jQuery 메소드 연습</h3> <h3>jQuery 메소드 연습</h3> <script type="text/javascript"> //$(selector).text() : 검색 태그의 태그내용을 반화하는 메소드 //→ HTML 태그를 제외한 태그내용 반환 //alert("결과 = "+$("#displayDiv").text());//결과 = text 메소드와 html 메소드 //============================================================================== //$(selector).html() : 검색 태그의 태그내용을 반화하는 메소드 //→ HTML 태그를 포함한 태그내용 반환 //alert("결과 = "+$("#displayDiv").html());//결과 = <p>text 메소드와 html 메소드</p> //============================================================================== //$(selector).text(value) : 검색 태그의 태그내용을 변경하는 메소드 //→ 변경될 태그내용에 HTML 태그가 포함된 경우 일반 문자값으로 처리 //$("#displayDiv").text("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>"); //============================================================================== //$(selector).html(value) : 검색 태그의 태그내용을 변경하는 메소드 //→ 변경될 태그내용에 HTML 태그가 포함된 경우 HTML 태그로 처리 //$("#displayDiv").html("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>"); //============================================================================== //묵시적 반복에 의해 검색된 모든 태그가 동일한 태그내용으로 변경 //$("h3").text("jQuery 메소드 연습 - 변경"); //명시적 반복에 의해 검색된 모든 태그를 차례대로 제공받아 서로 다른 태그내용으로 변경 /* $("h3").each(function(i) { $(this).text("jQuery 메소드 연습 - "+(i+1)); }); */ //text 메소드와 html 메소드를 사용하여 태그내용을 변경할 경우 변경값 대신 콜백함수를 전달하여 콤백함수의 반환값으로 태그내용 변경 가능 //→ 콜백함수는 검색된 태그의 갯수만큼 반복 호출 - 명시적 반복 //→ 콜백함수에 매개변수를 선언하여 처리 태그의 첨자와 태그내용을 제공받아 콜백함수에서 사용 가능 $("h3").text(function(index, content) { //return "jQuery 메소드 변경 - 변경";//콜백함수의 반환값으로 태그내용 변경 - 필수 //return "jQuery 메소드 변경 - 변경"+(index+1); return content+" - "+(index+1); }); </script> </body> </html>
