[Ajax XML] jQueryを使用して、XMLファイルの中身（ソースコード）をそのままで表示させたい

Question

XMLファイルの中身 <?xml version="1.0" encoding="utf-8"?>から</test_list>までを表示させたいです。

<div id="xml_data"></div>

$(function () {
		$.ajax({
		url: 'index.xml',
		type: 'GET',
		dataType: 'text',
		timeout: 1000,
		error: function () {
			alert("ロード失敗");
		},
		success: function (xml) {
			$("#xml_data").text(this);
		}
	});
});

<?xml version="1.0" encoding="utf-8"?>
<test_list>
	<test_data>
		<id>1</id>
		<name>織田</name>
		<text>初代</text>
	</test_data>
	<test_data>
		<id>2</id>
		<name>豊臣</name>
		<text>二代目</text>
	</test_data>
	<test_data>
		<id>3</id>
		<name>徳川</name>
		<text>三代目</text>
	</test_data>
</test_list>

いろいろなサイトでは、Ajaxを使用して、HTMLの変更・追加はできることは分かったのですが、全てを表示する方法がわからず質問させてもらいました。
よろしくお願いします。

Answer 1

こんにちは、HTMLのpreタグとcodeタグを使えば出来ると思います。
以下コードです。

$(function () {
    $.ajax({
        url: "index.xml",
        type: "GET",
        dataType: "text",
        timeout: 1000,
        error: function () {
            alert("ロード失敗");
        },
        success: function (xml) {
            var pre = $("<pre>");
            var code = $("<code>").text(xml);
            pre.append(code);
            $("#xml_data").append(pre);
        },
    });
});

Comments

[Barulu_sour]

ご回答ありがとうございます！！
助かりました！

Answer 2

こうでは？（改行などは反映されませんが）

success: function (xml) {
 // $("#xml_data").text(this);
 //                      ↓
    $("#xml_data").text(xml);
}

↓ インデント／改行もそのままにしたいなら。

【<pre>: 整形済みテキスト要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre

Comments

[Barulu_sour]

ご回答ありがとうございます！！
URLまで！
助かります。