• Q&A
  • 회원가입
  • 로그인

[HTML_CSS] JQ - replaceWith() 메서드 ★ - 선택요소 내용를 새 내용으로 대체/변경 (= replaceWith메서드 = 리플레이스위드 메서드)

133  
목차
  1. replaceWith() 예제 - 지정 글자로 요소 내용 변경
  2. replaceWith() 정의
  3. replaceWith() 구문
  4. replaceWith() 예제 - 함수 사용해 요소 내용 변경

 

replaceWith() 예제 - 지정 글자로 요소 내용 변경

 

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

<script>

$(document).ready(function(){

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

    $("p:first").replaceWith("Homzzang.com");

  });

});

</script>


<p>홈짱닷컴</p>

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


<button>클릭</button>

 

결과보기

 

replaceWith() 정의

 

선택 요소의 내용을 지정 내용으로 대체.

 


 

더 많은 예제 보기: https://api.jquery.com/replacewith/

 

 

replaceWith() 구문

 

$(selector).replaceWith(newContent)

또는,

$(selector).replaceWith(function(index))

 


[매개변수]

 

newContent

기존 내용을 대체할 새 내용 지정. (HTML 태그 포함 가능) 

※ 가능값 종류

  • HTML 요소들
  • jQuery 객체들
  • DOM 요소들

 

function(index)

기존 내용을 대체할 새 내용을 반환하는 함수 지정.

 

index

요소집합에서 요소의 색인 위치 반환

 

 

replaceWith() 예제 - 함수 사용해 요소 내용 변경

 

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

<script>

$(document).ready(function(){

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

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

      return "<h3>요소 색인번호: " + n + "</h3>";

    });

  });

});

</script>


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

 

<p>코딩언어 강의</p>

<p>그누보드 강의</p>

<p>서버관리 강의</p>

 

<button>클릭</button>

 

결과보기



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