• 회원가입
  • 로그인

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

목차

  1. html() 예제 - 모든 p요소의 내용 변경.
  2. html() 정의
  3. html() 구문
  4. html() 예제 - 맨 처음 p요소의 내용 반환.
  5. html() 예제 - 함수로 요소 내용 설정.

 

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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012