jQuery, Java Script : .html () 포함 element 가져 오기 : 예제, 구현

jQuery, Java Script : .html () 포함 element 가져 오기 : 예제, 구현

 

jQuery에서 HTML 요소의 모든 내용을 가져와야 할 때마다 편리한 함수 .html ()을 사용할 수 있습니다.

 

<div class="content">
  <h1>Headers</h1>
  <p>Paragraph of text</p>
</div>

<script>
    var contents = $('.content').html();
    alert(contents);
</script>

 

html () 함수를 사용하는 방법에 대한 데모는 위의 데모를 참조해도 좋습니다.

이것은 컨텐츠 변수를 .content div의 컨텐츠로 채웁니다. 최근 프로젝트에서 겪었던 문제는 요소의 HTML 내용을 가져와야하지만 .html()에 포함되지 않은 부모 element에도 필요하다는 것입니다.

.html () 함수를 실행하면 element의 내용만 가져오고, element 자체는 반환하지 않습니다. 그런 다음 다른 함수 .wrap()을 발견하여 선택한 HTML element 주위에 다른 HTML 요소를 래핑 할 수 있습니다.

 

 

<div class="content">
  <h1>Headers</h1>
  <p>Paragraph of text</p>
</div>

<script>
    $('.content').wrap('<p/>');
</script>

 

.content div는 이제 단락 태그로 둘러 싸여 있으므로 줄 바꿈 된 단락 태그에서 .html 함수를 호출하면 .content div 자체를 포함하여 .content div의 전체 내용을 반환합니다.

 

 

<div class="content">
  <h1>Headers</h1>
  <p>Paragraph of text</p>
</div>

<script>
    var contents = $('.content').wrap('<p/>').parent().html();
    alert(contents);
    $('.content').unwrap();
</script>

 

이제 부모 개체를 포함한 element의 전체 내용을 반환 할 수 있습니다.