jQuery의 val()과 html()의 차이점

jQuery의 val()과 html()의 차이점

val()과 html()은 jQuery에서 제공하는 메서드입니다. 두 메서드는 웹 페이지의 요소에 접근하거나 그 내용을 변경하는데 사용되지만, 사용되는 요소와 처리하는 내용에 차이가 있습니다.

1. val() 메서드

val() 메서드는 form 요소(input, select, textarea 등)의 value 값을 가져오거나 설정하는데 사용됩니다.

예를 들어, 아래와 같이 input 필드의 값을 가져오거나 설정할 수 있습니다.

javascript// 값을 가져올 때
var inputValue = $('#inputField').val();

// 값을 설정할 때
$('#inputField').val('새로운 값');

2. html() 메서드

html() 메서드는 HTML 요소의 내부 HTML(innerHTML)을 가져오거나 설정하는데 사용됩니다. 즉, 요소의 내용물을 포함한 모든 HTML 마크업을 반환하거나 변경합니다.

예를 들어, div 태그의 내부 HTML을 가져오거나 설정할 수 있습니다.

javascript// 내부 HTML을 가져올 때
var innerHTML = $('#myDiv').html();

// 내부 HTML을 설정할 때
$('#myDiv').html('<p>새로운 내용</p>');

두 메서드는 각각의 사용처에 따라 적절하게 사용되어야 합니다. form 요소의 값을 다루는 경우 val()을, HTML 요소의 내부 HTML을 다루는 경우 html()을 사용하면 됩니다.