jQuery 이미지의 HTML을 문자열로 가져옴

Question

jQuery로 이미지의 HTML을 얻으려면 어떻게해야합니까?

I 출력으로이 원하는 :

<img src="pokerface.png" alt="pokerface" /> 

나는이 함께 노력하고있어,하지만 난 빈 문자열 또는 null 받고 있어요 :

var imageHtml = $("#user-dialog .product-item img").html(); 

하는 반환 다음 객체,하지만 html을 원합니다.

var imageHtml = $("#user-dialog .product-item img") 

어떻게하면됩니까? 내가

var imageHtml = $("#user-dialog .product-item img").attr("src"); 

으로하려고하면

나는 이미지 (pokerface.png)의 올바른 소스를 얻을, 그래서 올바른 요소 알고있다.

Answer 1

이미지가이 작업을 수행 할 수있는 용기 내부의 유일한 요소 인 경우 :

$("#user-dialog .product-item img").parent().html(); 

그렇지 않으면 당신이 더미 요소를 생성하고 들이게 얻을 그것에 IMG 객체를 추가 할 수는() 값.

$('<div>').append($("#user-dialog .product-item img").clone()).html(); 

이 솔루션은 여기에 제안
How do you convert a jQuery object into a string?

Answer 2

jQuery("#user-dialog .product-item img").get(0).outerHTML; 

Answer 3

당신은 효과적으로 (를 지원하는 브라우저로) outerHTML 찾고 :

var imageHtml = $("#user-dialog .product-item img").map(function(){ 
     return this.outerHTML; 
    }).get(); 

JS Fiddle demo합니다.

이것은 물론 img 요소의 HTML 배열을 반환합니다. 이는 jQuery를 명시 적으로 get()과 일치하는 집합을 통해 반복 또는 브래킷 표기법 지수를 [n]

그리고 outerHTML를 검색하는 플러그인 (심각, 그것은 매우 간단한의) 간단한을 사용하는 대신, 모든에게 관련 정보를 대조 할 수 있습니다 일치하는 요소 :

JS Fiddle demo

일반적으로 jQuery 게터는 일치하는 집합의 첫 번째 요소의 결과 만 반환하는 반면 위의 코드는 배열을 반환하지만 원하는 경우 그 마지막 줄을 다음과 같이 변경할 수 있습니다. :

return _h[0]; 

JS Fiddle demo.

아, 그리고 분명히 (같은 .text() 및 기타 getter 메소드) explitly, 체인이 배열 또는 문자열을 반환받을 수 없습니다이 (만약 당신이 선호), 하지 jQuery 오브젝트.

참고 :

• jQuery를 :
  • get().
  • map().
• '일반'자바 스크립트 :
  • Array.push().
  • document.createElement().
  • Node.appendChild().
  • Node.cloneNode().
  • outerHTML.
  • outerHTML compatibility.