CSSスタイリングでXMLを動的にロード

Question

XMLファイルとそのCSSスタイルシートをtextareaまたはdivにロードします。各XMLファイルには、それを正しく表示するCSSスタイルシートを持っています

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet href="first.css"?> 
<?xml-stylesheet href="second.css"?> 
<book> 
    <sentence> 
    !!! SNIP !!! 

私はアドレスバーにそのURLを入力して、Webブラウザに直接ファイルをロードする場合、それはすべてのスタイリングを含め、正しく表示されます。今私はそれを動的にロードするのと同じ方法で表示したいと思います。

私はこれについていくつかのバリエーションを試しました。

<textarea id="display"> 
</textarea> 

$.ajax({ 
    type: "GET", 
    url: "https://raw.githubusercontent.com/someplace/my.xml", 
    dataType: "text", 
    success: function(xml) { 
     alert("GET succeeded") 
     var xmlDoc = $.parseXML(xml); 
     document.getElementById("display").append(xmlDoc.childNodes);  
    } 
}); 

パースされたXMLドキュメントにスタイルを動的に適用して表示する方法がわかりません。私はHTMLに変換したくないので、Webブラウザに正しく表示されている同じ文書を表示したいだけです。

誰でもこの方法を知っていますか？

Answer 1

XMLとCSSのポイントは、ブラウザでうまくレンダリングすることです。しかし、なぜtextareaで？表示されているタグがそれほど重要でない場合は、代わりにiframeタグで表示できます。そのiframeのsrc属性を変更することで、動的にロードすることができます。