Разделение строки JavaScript на XML и завертывание в элемент HTML

Question

Я работаю над отображением RSS-канала на веб-сайте с использованием jQuery и AJAX. Одна из строк из исходного файла XML обернута в тег <category>, и их несколько. Я получаю исходные данные следующим образом:

        var _category = $(this).find('category').text();

Поскольку этот метод возвращает несколько категорий, произнесите следующее:

<category>Travel</category>
<category>Business</category>
<category>Lifestyle</category>

Я получаю строки, возвращенные следующим образом :

TravelBusinessLifestyle

Моя конечная цель состоит в том, чтобы каждая из этих отдельных строк возвращалась и была обернута в отдельные элементы HTML, такие как <div class="new"></div>.

. В итоге я попробовал следующее :

    var _categoryContainer = $(this)
    .find('category')
    .each(function () {
      $(this).wrap( "<div class='new'></div>" );
    });

среди множества других вариантов.

Все это добавляется к структуре HTML, подобной следующей.

        // Add XML content to the HTML structure
        $(".rss .rss-loader")
          .append(
            '<div class="col">'
            + <h5 class="myClass">myTitle</h5>
            + _category
            + "</div>"
          );

Любые предложения был бы очень признателен!

Answer 1

То же, что и первый ответ, но без jquery

let container = document.querySelector('div#container');
document.querySelectorAll('category').forEach(element => {
  let div = document.createElement('div');
  div.innerText = element.innerText;
  container.appendChild(div);
})

<category>Travel</category><category>Business</category><category>Lifestyle</category>

<div id="container"></div>

Answer 2

, если это простое html, которое упоминается в вопросе. Вы можете использовать что-то вроде ниже.

var html="<category>Travel</category><category>Business</category><category>Lifestyle</category>"
var htmlObj=$.parseHTML(html);
var container=$("#container")
$.each(htmlObj,function(i,o){
   container.append("<div class='new'>"+o.innerText+"</div>")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'></div>