从 XML 中拆分 JavaScript 字符串并包装在 HTML 元素中答案

【问题标题】：Splitting a JavaScript string from XML and wrapping in HTML element从 XML 中拆分 JavaScript 字符串并包装在 HTML 元素中
【发布时间】：2020-03-16 12:58:41
【问题描述】：

我正在通过使用 jQuery 和 AJAX 在网站中显示 RSS 提要。源 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>"
          );

任何建议将不胜感激！

【问题讨论】：

不清楚你想对输出做什么 - 如果它被添加到 html，那么你只需要添加.appendTo():$(this).wrap("<div>").appendTo("#output");
不是附加到 HTML 的问题 - 我的问题是拆分源字符串。更新了我的问题以反映它是如何被附加的。
所以在拆分时附加，使用您的代码。有什么问题？

标签： javascript jquery html ajax xml

【解决方案1】：

如果它是一个问题中提到的简单 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>

【讨论】：

【解决方案2】：

与第一个答案相同，但没有 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>

【讨论】：