jQuery 제이쿼리의 HTML 조작 방법

jQuery는 HTML 엘리먼트와 특성들을 변경시키고 조작할 수 있는

강력한 메소드(함수)를 가지고 있습니다.

 

 

[HTML 내용 바꾸기]

$(selector).html(content)

html()메소드는 일치하는 HTML 엘리먼트의 내용을 변경시킵니다.

예)

$(“p").html("W3Schools");

{적용예제보기 8-1}

 

 

[HTML 내용 추가하기]

$(selector).append(content)

append() 메소드는 일치하는 HTML 엘리먼트 안에 내용을 추가시킵니다.

$(selector).prepend(content)

prepend() 메소드는 일치하는 HTML 엘리먼트 안의 내용 앞쪽에 컨텐츠를 추가시킵니다.

예 - append()

$(“p").append("W3Schools");

{적용예제보기 8-2}

예 - prepend()

$("p").prepend("W3Schools");

{적용예제보기 8-3}

$(selector).after(content)

after() 메소드는 일치하는 모든 엘리먼트 뒤쪽에 HTML 내용을 삽입합니다.

$(selector).before(content)

before() 메소드는 일치하는 모든 엘리먼트 앞쪽에 HTML 내용을 삽입합니다.

예 - after()

$("p").after(" W3Schools");

{적용예제보기 8-4}

예 - before()

$("p").before("W3Schools ");

{적용예제보기 8-5}

 

 

[HTML 내용을 조작하는 jQuery 메소드 정리]

$(selector).html(content) → 선택한 엘리먼트의 HTML 내용을 변경한다

$(selector).append(content) → 선택한 엘리먼트의 HTML에 내용을 추가한다

$(selector).after(content) → 선택한 엘리먼트의 뒤쪽에 HTML을 추가한다

 

 

감사합니다.

출처

본문 작성자에 의해 임의로 예제를 못 볼수도 있습니다.