如何多次添加相同的 XML 标签，但内容不同？

Question

我的代码有一些问题。我想用 JQuery / JavaScript 创建一个 XML 文档。我现在正处于这一点，我想创建几个标签并用相同的标签填充它们，但标签内的内容不同。

这里是更好理解的代码

function setItems(xmlDoc, channelTag){
        const itemList = [];

        const itemTitle = xmlDoc.createElement("title");
        const itemLink = xmlDoc.createElement("link");
        const itemGuid = xmlDoc.createElement("guid");
        const itemMediaContent = xmlDoc.createElement("media:content");
        const itemMediaDescription = xmlDoc.createElement("media:description");

        itemList.push(itemTitle, itemLink, itemGuid, itemMediaContent, itemMediaDescription);

        for (var i = 0; i < jsonObj.length; i++){

            var item = xmlDoc.createElement("item");
            channelTag.appendChild(item);

            //Populate the <item> with the tags from "itemList" and content from "jsonObj"
            $.each(itemList, function(index) {

                $(channelTag).children('item')[i].appendChild(itemList[index]).textContent = jsonObj[0].title;
            })

        }   
    }

代码的输出如下所示：

<item></item>
<item></item>
<item>
 <title>Something</title>
 <guid>Something</guid>
 <link>Something</link>
 <media:content>Something</media:description>
 <media:description>Something</media:description>
</item>

它总是填充最后一个项目标签，而不是上面的那些。我想要的是每个项目标签都有相同的子标签（例如标题、链接、guid 等）。我是否缺少一些独特的标签或类似的东西？

编辑： 这是一些最小的 HTML 和 XML。函数“xmlDoc”和“channelTag”的值只包含一些文档元素，我的项目应该附加在其中，如下所示：

<rss>
  <channel>
    <title>SomeTitle</title>
    <atom:link href="Link" rel="self" type="application/rss+xml"/> 
    <link>SomeLink</link>
    <description>SomeDesc</description>
    <item></item>
    <item></item>
    <item></item>
</channel>
</rss>



 <div class="col-5 col-sm-5 col-lg-3 order-2 count">
       <a class="guid1"><img class="card-img image1"></a>
    </div>
    <div class="col-7 col-sm-7 col-lg-5 order-2">
         <div class="card-body">
            <a class="guid1">
              <h5 class="card-title title1 overflow-title"></h5>
            </a>
           <p class="card-text body1 text-body overflow-body"></p>
         <div class="card-body subtitle">                                                                                  
            </div>
         </div>
    </div>

Answer 1

您的代码存在几个问题，但我们最想关注的领域是：

for (var i = 0; i < jsonObj.length; i++){
    var item = xmlDoc.createElement("item");
    channelTag.appendChild(item); // you're adding a node here
    $.each(itemList, function(index) {
        $(channelTag).children('item')[i].appendChild(... // and here
    })
}

您应该在将节点添加到 channelTag 之前创建并填充节点，而不是每次迭代多次附加节点。

这是你可以做到的一种方式：

// use a "$" sign as a variable name prefix, so you know it's a Document Element and not a regular javascript variable
var $item = xmlDoc.createElement("item");
// you don't need jQuery for this iteration
itemList.forEach(function (item, index) {
  $item.appendChild(itemList[index]).textContent = jsonObj[0].title;
});
// if "channelTag" is a Document Element, rename it "$channelTag"
$channelTag.appendChild(item);

关于上面代码的一些事情：

• 你不需要 jQuery，改用forEach
• 没有办法知道channelTag 是什么类型。如果是选择器（字符串类型），则使用$(selector)，但您之前使用的是appendChild() 方法，表明它实际上是一个文档元素。在这种情况下，您不需要用 $() 包装它

我没有测试此代码所需的上下文，因此不能保证它会开箱即用。但是尝试重新阅读您的代码并从上到下进行检查。对于每个变量，描述其类型和值。当我迷失在代码中时，我发现这很有帮助。