일반 텍스트로 div의 클라이언트 측 HTML 표시

Question

PHP 처리 HTML이 포함 된 div가 있습니다.

jsfiddle.net처럼 다른 div에 중첩 된 PHP에서 생성 된 HTML을 보여주는 d div가 필요합니다. 이것은 HTML/CSS를 만드는 프로그램으로 클라이언트에게 보여지기 때문에 HTML/CSS 코드를 복사하여 사용할 수있게하고 싶습니다.

코드와 볼 수있는 코드는 동일한 사이트에 있습니다.

예 : 내가 웹을 검색하고 어떤 해결책을 찾을 수 있었다 haven't

<div id="processed_html"> 
 
    <div id="item" style="color:black; width:154px;"></div> 
 
    <div id="item" style="color:yellow; width:34px;"></div> 
 
</div> 
 

 
<div id="view_processed_client_code"> 
 
    //Here i want all the code above to show as plain text 
 
</div>

.. 사전에

감사합니다! :-)

Answer 1

내가 좋을 것 :

// references to the element holding the client-entered code: 
 
var processed = document.getElementById('processed_html'), 
 
// and the area to which it should be output: 
 
    output = document.getElementById('view_processed_client_code'), 
 
// finding the text-property of the browser: 
 
    textProp = 'textContent' in document ? 'textContent' : 'innerText'; 
 

 
// setting the textual content of the output element to the innerHTML of the 
 
// element holding the client-entered code: 
 
output[textProp] = processed.innerHTML;

#view_processed_client_code { 
 
    white-space: pre-wrap; 
 
}

<div id="processed_html"> 
 
    <div class="item" style="color:black; width:154px;"></div> 
 
    <div class="item" style="color:yellow; width:34px;"></div> 
 
</div> 
 

 
<div id="view_processed_client_code"> 
 
    //Here i want all the code above to show as plain text 
 
</div>