jQuery text,html메소드

yeong ·2022년 11월 24일
0

jquery

목록 보기
9/20

text 메소드와 html 메소드 기본활용

$(selector).text() : 검색 태그의 태그내용을 반환하는 메소드
> HTML 태그를 제외한 태그내용 반환

alert("결과 = "+$("태그명").text());//결과 = text 메소드와 html 메소드 

$(selector).html() : 검색 태그의 태그내용을 반환하는 메소드
> HTML 태그를 포함한 태그내용 반환

alert("결과 = "+$("태그명").html());//결과 = <p>text 메소드와 html 메소드</p>

$(selector).text(value) : 검색 태그의 태그내용을 변경하는 메소드
> 변경될 태그내용에 HTML 태그가 포함된 경우 일반 문자값으로 처리

$("태그명").text("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>");

$(selector).html(value) : 검색 태그의 태그내용을 변경하는 메소드
> 변경될 태그내용에 HTML 태그가 포함된 경우 HTML 태그로 처리

$("태그명").html("<p style='color: red;'>text 메소드에 의해 변경된 내용</p>");

반복에 의한 변경 (예시를위한 "태그명"으로 같은 태그들이 여러개 존재한다고 전재한다.)

묵시적 반복에 의해 검색된 모든 태그가 동일한 태그내용으로 변경

$("태그명").text("jQuery 메소드 연습 - 변경");

명시적 반복에 의해 검색된 모든 태그를 차례대로 제공받아 서로 다른 태그내용으로 변경

	$("h3").each(function(i) {
		$(this).text("jQuery 메소드 연습 - "+(i+1));
	});

text 메소드와 html 메소드를 활용한 명시적 반복에 의한 태그내용 변경

text 메소드와 html 메소드를 사용하여 태그내용을 변경할 경우 변경값 대신 콜백함수를 전달하여
콜백함수의 반환값으로 태그내용 변경 가능
> 콜백함수는 검색된 태그의 갯수만큼 반복 호출 - 명시적 반복
>콜백함수에 매개변수를 선언하여 처리 태그의 첨자와 태그내용을 제공받아 콜백함수에서 사용 가능

	$("h3").text(function(index, content) {
		//return "jQuery 메소드 연습 - 변경";//콜백함수의 반환값으로 태그내용 변경 - 필수
		//return "jQuery 메소드 연습 - "+(index+1);
		return content+" - "+(index+1);
	});

0개의 댓글