동적으로 삽입 된 요소에서 생성 된 HTML을 어떻게 가져올 수 있습니까?

동적 단추를 만들 때 JQuery를 사용하여 웹 페이지의 소스 코드를 볼 때 $("<input>", { "id": "myid", "type"...과 같은 JQuery 코드가 표시됩니다. <input id="Button1" type="button" value="button" />과 같은 생성 된 버튼 코드가 표시 되길 바랍니다. 어떻게하면됩니까?동적으로 삽입 된 요소에서 생성 된 HTML을 어떻게 가져올 수 있습니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("<input>", { "id": "myid", "type": "button", "value": "Confirm", "name": "comfire" }).appendTo("#tablemsgbox"); 
     $("#myid").click(function() { 
      alert($(this).val()); 
     }); 
    }); 
</script> 
</head> 

<body> 
    <input id="Button1" type="button" value="button" /> 
    <div id="tablemsgbox"> 
    </div> 
</body> 
</html>

출처

2012-02-02 HelloCW

방화범과 같은 도구를 사용하는 경우 DOM에 표시되어야합니다. –

소스를 보면 서버에서 생성 한 원본 페이지가 표시되지만 자바 스크립트를 통해 수행되는 DOM 조작은 표시되지 않습니다. js 조작 후 DOM의 상태를보고 싶다면 Firebug for Firefox, Chrome Inspector 또는 IE 개발자 도구와 같은 도구를 사용하십시오. 방금 생성 된 요소의 HTML을 원하는 경우에

출처

2012-02-02 01:54:18

, 당신은이 작업을 수행 :

$('#myid')[0].outerHTML

Demo. 결과는 브라우저에 의해 달라질 수 있습니다.

그러나 페이지를 마우스 오른쪽 단추로 클릭 할 수 있다고 생각하는 경우 소스보기를 클릭하고 나머지 소스와 삽입 된 요소가 제대로 표시되는지 확인하십시오.

HTML 소스는 DOM의 일련 화 된 표현입니다. 브라우저는 HTML을 구문 분석하여 DOM을 나타내는 메모리 내 데이터 구조로 변환 한 다음이를 사용합니다. DOM afterword (스크립트를 통해)에 대한 모든 작업은 스크립트가 영향을 미치지 않았기 때문에 '소스'에 반영되지 않습니다. Firebug (또는 다른 개발자 도구)가 DOM을 파싱하고 현재 상태로 보여주는 것은 무엇입니까?

즉, innerHTML/outerHTML을 통해 브라우저에 을 다시 일련 번호를 지정하여 HTML에을 직렬화 할 수 있습니다. 그러나 다시 소싱 된 HTML은 – 스크립트를 사용하여 DOM을 수정하지 않아도 원래 소스 인 –과 동일하게 보장되지 않습니다. 파싱 중에 상황이 바뀔 수 있기 때문입니다. 이는 HTML의 용례가 엉성한 마크 업의 성격이다.

극단적 인 예를 — 당신이 ¹XML with an XSLT transform로 웹 페이지를 제공 할만큼 바보라면 같은 사실 —에서 재 직렬화 된 HTML은 원래의 소스 코드와 같은 absoluely 아무것도 보이지 않을 것이다. 당신은 전체 DOM의 현재 상태의 재 직렬화 표현을보고 싶다면

그러나, 문자열 보면 당신은 여기에서 얻을 :

document.documentElement.outerHTML

¹이 작업을 수행하지 마십시오 . Seriously.

출처

2012-02-02 01:58:07 josh3736

감사! 하지만 http://jsfiddle.net/josh3736/pVXaj/에서 소스 코드 및 Firebug가 찾을 수 없습니다. 해. – HelloCW

@ user828896 : 답변을 업데이트합니다. – josh3736

동적으로 삽입 된 요소에서 생성 된 HTML을 어떻게 가져올 수 있습니까?

답변

관련 문제