jQueryを使用して段落内に順序付けされていないリストを追加する

Question

クライアント側のクラスでは、XHR-request/getElementByIdをjQuery-ajax-request/jQuery-document-manipulationに変更しています。 「Rob's Rock & Roll Memorabilia」の4つの項目のいずれかの説明が表示されます。 "description"というIDを持つ出力divに3つの段落を追加しています。説明、価格、1つまたは複数のURLが含まれます。 開かれた段落タグと終わりの段落タグ内に説明テキストと価格テキストを追加すると問題ありません。

***質問： 返されたXML文書に2または3のURLを追加する際に問題があります。アンカータグは、段落内の順序付けられていないリスト内のすべてのリスト項目内のリンクです。 文字列はコンソールに表示されるはずですが、ページを調べると、1）p-openタグ、2）p-close-tag、3）順序付けられていないリスト（複数の要素）、 4）p-open-tag、および5）p-close-tagを含む。 説明と価格パラグラフがどのように追加されたのか分かりませんが、url段落では段落タグを追加した後、appednに追加して、追加した後に段落タグを追加しました。

3つの順序付けされていないリストをjQueryで動的に追加することについて質問がありましたが、まだ回答はありませんでした。

私のデータは： サンプルXML文書が返されるが、次のとおりです。

<item id="itemHat"> 
    <description>Michael Jackson's hat as worn in the "Billie Jean" video. Not really rock memorabilia but it smells better than Slash's tophat. 
    </description> 
    <price>1699.99</price> 
    <resources> 
    <url>http://www.michaeljackson.com/</url> 
    <url>http://music.yahoo.com/vid-2143030--Billie-Jean</url> 
    </resources> 
    </item> 

これは私が使用していたコードでは、次のとおりです。

// Add description and price to description output area. 
descriptionSring = "<p>Description: " + $(xml).find("description").text() + "</p>"; 
priceString = "<p>Price: " + $(xml).find("price").text() + "</p>"; 
$("#description").append(descriptionSring + priceString); 
// Add URL's to description output area. 
$(xml).find("resources").each(function(resoureceIndex, resourceValue) { 
    urlString = ""; 
    $(this).find("url").each(function(urlIndex, urlValue) { 
     urlString += "<li><a href='" + urlValue.textContent + "'>" + urlValue.textContent + "</a></li>"; 
    }); 
    $("#description").append("<p><ul>" + urlString + "</ul></p>"); 
    console.log(urlString); 
}); 

Webページインスペクタ（クローム）を示しています。

<div id="description"> 
    <p>Description: Michael Jackson's hat as worn in the "Billie Jean" video. Not really rock memorabilia but it smells better than Slash's tophat.</p> 
    <p>Price: 1699.99</p> 
    <p></p> 
    <ul> 
     <li><a href="http://www.michaeljackson.com/">http://www.michaeljackson.com/</a></li> 
     <li><a href="http://music.yahoo.com/vid-2143030--Billie- Jean">http://music.yahoo.com/vid-2143030--Billie-Jean</a></li> 
    </ul> 
    <p></p> 
    </div> 

コンソールにはurlStringが表示されていることが表示されます（動作するはずです）： 「

http://www.michaeljackson.com/ '>http://www.michaeljackson.com/

http://music.yahoo.com/vid-2143030--Billie-Jean'>http://music.yahoo.com/vid-2143030--Billie-Jean

」

Answer 1

私は別の方法を試してみましたが、それは働いているようだ。

HTML：

<p id="desc"></p> 

はJavaScript：

var $p = $("<p></p>"); 
var lis = "<li>Test</li><li>Test 2</li>"; 
var $ul = $("<ul>" + lis + "</ul>"); 
var $final = $p.append($ul); 

$("#desc").append($final); 

ここではフィドルです：https://jsfiddle.net/mehmetb/1qf83x1g/