Добавление неупорядоченного списка в абзаце с использованием jQuery

Question

Для класса на стороне клиента я изменяю XHR-request/getElementById как jQuery-ajax-request/jQuery-document-manipulation. Он должен отображать описания одного из 4 предметов из «Rob's Rock & Roll Memorabilia». Я добавляю 3 абзаца к выходному div с идентификатором «description»; описание, цену и один или несколько URL-адресов. Добавление текста описания и цены в тегах абзаца открытого и закрытого тегов отлично работает.

*** Вопрос: У меня возникли проблемы с добавлением 2 или 3 URL-адресов в возвращенном XML-документе в качестве ссылок привязки-метки в каждом элементе списка в пределах неупорядоченного списка, который находится внутри абзаца. Строка отображается в консоли, поскольку я уверен, что она должна, но когда я проверяю страницу, я получаю: 1) p-open tag, 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 Page Inspector (хром) показывает:

<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/