javascript - Jquery - 取得した xml ファイルを取得して DOM に入力できませんでした

Question

xml ファイルを取得してページにコンテンツを表示しようとしていますが、これまでのところうまくいきませんでした。ネットワーク キャプチャで 200 が返されるので、ファイルが正常に取得されたことを確認できます。$title のアラートボックスを配置しようとしましたが、空白です。

ここで何が間違っているのかわかりません。どんな助けでも大歓迎です。ありがとう

以下は私のマークアップです

<div id="textArea">This is a test</div>

MyScript.js

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "BooksCatalog.xml",
        dataType: "xml",
        success: function (result) {
            var xmlDoc = $.parseXML(result),
            $xml = $(xmlDoc),
            $title = $xml.find("title");
            $("#textArea").append($title.text());        
        }
    });
});

BooksCatalog.xml

<?xml version="1.0" encoding="utf-8" ?>
<catalog>
  <book id="bk101">
    <author>Gambardella, Matthew</author>
    <title>XML Developer's Guide</title>
    <genre>Computer</genre>
    <price>44.95</price>
    <publish_date>2000-10-01</publish_date>
    <description>
      An in-depth look at creating applications
      with XML.
    </description>
  </book>
  <book id="bk102">
    <author>Ralls, Kim</author>
    <title>Midnight Rain</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-12-16</publish_date>
    <description>
      A former architect battles corporate zombies,
      an evil sorceress, and her own childhood to become queen
      of the world.
    </description>
  </book>
</catalog>