jQuery, 전체 요소의 html을 가져옵니다.

jQuery, 전체 요소의 html을 가져옵니다.

이 질문에는 이미 다음과 같은 답변이 있습니다.

선택한 요소의 외부 HTML 가져오기 (31개 답변)

닫힘5년 전에.

컨텐츠뿐만 아니라 선택한 요소의 전체 html을 얻고 싶습니다. .html()은 내부에 javascripts를 사용합니다.문서에 따른 HTML() 방법HTML:

<div id="divs">
  <div id="div1">
    <p>Some Content</p>
  </div>
  <div id="div2">
    <p>Some Content</p>
  </div>
</div>

사용.$('#divs:first').html();문단 요소만 반환합니다.나는 전체 요소에 대한 html을 얻고 싶습니다. 다음과 같습니다.

  <div id="div1">
    <p>Some Content</p>
  </div>

두 하위 디브의 html을 반환하므로 .parent를 사용할 수 없습니다.

다음과 같이 전체 컨텐츠를 얻기 위해 복제할 수 있습니다.

var html = $("<div />").append($("#div1").clone()).html();

아니면 플러그인으로 만들어서 대부분은 이것을 "외부"라고 부르는 경향이 있습니다.HTML", 다음과 같습니다.

jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};

그럼 그냥 전화하면 됩니다.

var html = $("#div1").outerHTML();

일반적인 사용 사례에서는 차이가 의미가 없지만 표준 DOM 기능을 사용하는 경우

$("#el")[0].outerHTML

보다 약 2배 빠릅니다.

$("<div />").append($("#el").clone()).html();

그래서 저는 다음과 같이 하겠습니다.

/* 
 * Return outerHTML for the first element in a jQuery object,
 * or an empty string if the jQuery object is empty;  
 */
jQuery.fn.outerHTML = function() {
   return (this[0]) ? this[0].outerHTML : '';  
};

다음을 단순화하는 라인 코드 하나로 이를 달성할 수 있습니다.

$('#divs').get(0).outerHTML;

그것처럼 간단해.

Jquery의 Clone() 방법으로 아이 자신과 그의 모든 피상속자(자녀)를 쉽게 얻을 수 있습니다.

var child = $('#div div:nth-child(1)').clone();  

var child2 = $('#div div:nth-child(2)').clone();

문제의 첫 번째 쿼리에 대해 이 메시지를 받게 됩니다.

<div id="div1">
     <p>Some Content</p>
</div>

언급URL : https://stackoverflow.com/questions/3614212/jquery-get-html-of-a-whole-element