[HTML_CSS] JQ - html() 메서드 ★ - 선택요소의 내용설정/내용변경/내용반환 (= html메서드 = 에이치티엠엘메서드)

목차

1. html() 예제 - 모든 p요소의 내용 변경
2. html() 정의
3. html() 구문
4. html() 예제 - 맨 처음 p요소의 내용 반환
5. html() 예제 - 함수로 모든 p요소의 내용 변경
6. html() 예제 - <input> 경우 반환/설정
7. html() 예제 - <select> 경우 반환/설정
8. html() 예제 - <textarea> 경우 반환/설정

html() 예제 - 모든 p요소의 내용 변경

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").html("홈짱닷컴 <b>Homzzang.com</b>");

  });

});

</script>

<button>클릭</button>

<p>홈페이지 제작관리</p>

<p>서버관리 코딩교육</p>

결과보기

html() 정의

 

선택 요소의 HTML 내용을 반환/설정.

• 「반환」 경우, 맨 처음 일치하는 요소만 반환.
• 「설정」 경우, 모든 일치 요소의 내용을 설정.

 

---

cf.

text() 메서드 - 선택 요소의 텍스트 내용을 반환/설정.

 

html() 구문

 

HTML 내용 반환

$(selector).html()

 

HTML 내용 설정

$(selector).html(content)

 

함수 사용해 HTML 내용 설정

$(selector).html(function(index,currentcontent))

 

---

[매개변수]

 

content

필수. 입력할 내용. 

※ HTML 포함 가능.

 

function(index,currentcontent)

선택. 입력할 내용 반환하는 함수 지정. 

• index - 요소셋에서 선택요소의 색인번호 반환.
• currentcontent - 선택요소의 현재 내용을 반환. 

 

html() 예제 - 맨 처음 p요소의 내용 반환

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("p").html());

  });

});

</script>

<button>클릭</button>

<p>홈짱닷컴 <b>Homzzang.com</b></p>

<p>코딩언어 그누보드 강의</p> 

 

결과보기

html() 예제 - 함수로 모든 p요소의 내용 변경

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").html(function(n){

      return "p 요소 색인번호: " + n;

    });

  });

});

</script>

<button>클릭</button>

<p>홈짱닷컴 Homzzang.com</p>

<p>코딩언어 그누보드 강의</p>

 

결과보기

html() 예제 - <input> 경우 반환/설정

주의: <input> 경우, 종료태그 없는 태그라서 val() 메서드 이용해야 함.

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<input type="text" id="hz" value="홈짱닷컴">

<script>

// 반환 X 

var hzhtml = $('#hz').html(); // 반환X

console.log(hzhtml); 

    

var hzval = $('#hz').val(); // 반환O

console.log(hzval);    

// 설정

$('#hz').html('<b>Homzzang.com</b>'); // 설정X

$('#hz').val('<b>Homzzang.com</b>'); // 설정O

</script>

 

결과보기

html() 예제 - <select> 경우 반환/설정

[주의] - 값 (반환/설정)은 이루어지나, 태그는 적용 X

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<select id="lang">

    <option value="html"><b>html<b></option>

    <option value="css"><b>css</b></option>

    <option value="js" selected><b>js</b></option>

</select>

<script>

// 반환

var langhtml = $('#lang option:selected').html();

console.log(langhtml);

  

// 설정

$('#lang option:selected').html('<b>javascript</b>');

</script>

결과보기

html() 예제 - <textarea> 경우 반환/설정

[주의] - <textarea> 안에서는 태그 적용 X. (반환 경우, 태그 기호는 실체값으로 가져옴. / 설정 경우, 입력값 그대로 출력됨.)

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<textarea id="hz"><b>홈짱닷컴</b></textarea>

<script>

// 반환 (★ 기호 뺀 값 형태로 가져옹)

var hzhtml = $('#hz').html();

console.log(hzhtml); // &★lt;b&★gt;홈짱닷컴&★lt;/b&★gt;

 

// 설정

$('#hz').html('<b>Homzzang.com</b>');

</script>

결과보기