[jQuery All in One] 특정 요소에 원하는 요소를 삽입하는 방법 - .html()

jQuery html 메서드는 지정한 요소의 자식 요소에 원하는 컨텐츠를 삽입합니다. Javascript 메서드 중에 innerHTML을 떠올리시면 됩니다.

.append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.html() - 특정 요소에 html을 삽입

 

jQuery version: 3.4.1

.html()

---

설명 : 일치하는 요소 집합에서 첫 번째 요소의 HTML 내용을 가져옵니다.

 

.html()

이 메소드는 매개변수를 받지 않습니다.

이 방법은 XML 문서에서 사용할 수 없습니다. 

 

HTML 문서에서 .html ()을 사용하여 모든 요소의 내용을 가져올 수 있습니다. 선택자 표현식이 둘 이상의 요소와 일치하면 첫 번째 일치하는 항목만 HTML 컨텐츠를 리턴합니다. 아래 코드를 확인해주세요.

$("div.demo-container").html();

다음 <div>의 컨텐츠를 검색하려면 문서에서 class="demo-container"가있는 첫 번째 컨텐츠 여야합니다.

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

결과는 다음과 같습니다.

<div class="demo-box">Demonstration Box</div>

이 메소드는 브라우저의 innerHTML 속성을 사용합니다. 일부 브라우저는 원본 문서에서 HTML 소스를 정확하게 복제하는 HTML을 반환하지 않을 수 있습니다. 예를 들어 Internet Explorer는 영문자 및 숫자만 포함하는 경우 속성 값 주위에 따옴표를 사용하지 않는 경우가 있습니다.

추가 사항

URL 쿼리 매개 변수, 쿠키 또는 양식 입력과 같은 신뢰할 수없는 소스에서 얻은 문자열을 삽입하는데 이 방법을 사용하지 마세요. 그렇게 하

면 cross-site-scripting(XSS) 취약점이 발생할 수 있습니다.

Examples

p 태그를 클릭하여 HTML에서 텍스트로 변환하십시오.

.html(htmlString)

---

설명 : 일치하는 요소 집합에서 첫 번째 요소의 HTML 내용을 가져옵니다.

 

.html(htmlString)

htmlString
Type: htmlString

일치하는 각 요소의 내용으로 설정할 HTML 문자열입니다.

.html(function)

function
Type: Function( Integer index, htmlString oldhtml ) => htmlString

설정할 HTML 내용을 반환하는 함수입니다. 요소의 인덱스와 이전 HTML값을 매개변수로 받습니다. jQuery는 함수를 호출하기 전에 요소를 비 웁니다. oldhtml 인수를 사용하여 이전 컨텐츠를 참조하십시오. 함수 내에서 이것은 세트의 현재 요소를 나타냅니다.

이 방법은 XML 문서에서 사용할 수 없습니다. 

 

.html()을 사용하여 요소의 내용을 설정하면 해당 요소에 있던 모든 내용이 새 내용으로 완전히 바뀝니다. 또한 jQuery는 해당 요소를 새 컨텐츠로 바꾸기 전에 하위 요소에서 데이터 및 이벤트 핸들러와 같은 다른 구성을 제거합니다.

 

아래 코드를 확인하세요.

<div class="demo-container">
  <div class="demo-box">Demo box</div>
</div>

<div class="demo-container">의 내용은 다음과 같이 설정할 수 있습니다.

$("div.demo-container").html("<p>새로운 컨텐츠</p>");

<!-- 완전히 새로운 컨텐츠로 대체됩니다. -->
<div class="demo-container">
  <p>새로운 컨텐츠</p>
</div>

jQuery 1.4부터 .html () 메서드를 사용하면 함수를 전달하여 HTML 내용을 설정할 수 있습니다.

$( "div.demo-container" ).html(function() {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});

 

jQuery와 관련된 포스팅

 

Manipulation

 

DOM Insertion, Inside

.append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.html() - 특정 요소에 html을 삽입