html 메서드
html 메서드는 요소의 텍스트를 변경하거나
태그와 함께 텍스트를 가져올 수 있게 해줍니다.
문법
텍스트 가져오기:
$(셀렉터).html();
텍스트 변경하기:
$(셀렉터).html(새로운 텍스트);
추가 정보
html 메서드는 주어진 함수를 집합 내 각 요소에 적용할 수 있습니다.
이때 함수는 첫 번째 매개변수로 집합 내 요소의 번호를,
두 번째 매개변수로 요소의 현재 텍스트를 받습니다:
$(셀렉터).html(function(집합 내 번호, 요소의 현재 텍스트));
함수의 변수명은 임의로 지을 수 있습니다.
예를 들어, 첫 번째 매개변수에
index라는 이름을 주면, 함수 내부에서
현재 처리 중인 요소의 집합 내 번호를 담은 변수
index를 사용할 수 있습니다.
마찬가지로, 두 번째 매개변수에
예를 들어 value라는 이름을 주면,
함수 내부에서 현재 처리 중인 요소의 텍스트를 담은 변수
value를 사용할 수 있습니다:
$(셀렉터).html(function(index, value) {
// 여기에서 변수 index와 value를 사용할 수 있습니다
});
각 요소의 텍스트는 해당 요소에 대해 함수가 반환하는 값으로 변경됩니다.
예제
우리 문단의 내용을 화면에 출력해 봅시다:
<p id="test">텍스트</p>
let text = $('#test').html();
alert(text);
예제
우리 문단의 내용을 변경해 봅시다:
<p id="test">텍스트1</p>
$('#test').html('텍스트2');
HTML 코드는 이렇게 될 것입니다:
<p id="test">텍스트2</p>
예제
우리 문단의 내용을 태그가 포함된 텍스트로 변경해 봅시다:
<p id="test">텍스트1</p>
$('#test').html('<span>텍스트2</span>');
HTML 코드는 이렇게 될 것입니다:
<p id="test"><span>텍스트2</span></p>
예제
각 문단 끝에 집합 내 순서 번호를 추가해 봅시다:
<p>텍스트</p>
<p>텍스트</p>
<p>텍스트</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTML 코드는 이렇게 될 것입니다:
<p>텍스트 0</p>
<p>텍스트 1</p>
<p>텍스트 2</p>
