0

我正在尝试找到在 Javascript (JQuery/AngularJS) 中合并两个 HTML 字符串的最佳方法，例如：

var context = '<html>
  <head>
  </head>
  <body>
     <ul id="list">
       <li>itemA</li>
       <li>itemB</li>
     </ul>
   </body>
</html>';

合并：

var additionnalInfo = '<ul id="list">
       <li>itemC</li>
       <li>itemD</li>
     </ul>';

应将上下文变量修改为：

'<html>
  <head>
  </head>
  <body>
     <ul id="list">
       <li>itemA</li>
       <li>itemB</li>
       <li>itemC</li>
       <li>itemD</li>
     </ul>
   </body>
</html>';

任何想法 ？

4

1 回答 1

0

应该能够做这样的事情，只要你的附加信息只包含你想要添加的元素（你可以很容易地剥离到）。

var additionnalInfo = '<li>itemC</li>
                       <li>itemD</li>';

var list = getElementById('list');
list.innerHTML += additionalInfo;

编辑

如果您必须能够匹配多个 id，那么您可以使用 jQuery 遍历一个类型的所有元素（例如所有列表），并检查 id 是否相等，然后按上述方式追加。前任：

var additionalInfo = $.parseHTML('<ul id="list"><li>itemC</li><li>itemD</li></ul>');
var elements = additionalInfo.find($('ul'));
var lists = $('ul').get();

elements.each(function(){
    var el = this;
    lists.each(function(){
        if($(this).attr('id') == el.attr('id')){
            el.innerHTML += $(this).innerHTML;
        }
});

有更有效的方法可以做到这一点，但它应该是您需要的良好基础。基本上只是遍历附加 html 中的所有“父”列表元素。将这些 id 与现有 html 中的列表 id 进行比较，如果它们相同，则将新的 innerHTML 附加到现有列表中。

您还可以使其更通用，以便在解析 html 字符串后，获取具有 id 的任何元素的类型，然后查找该类型。有很多方法可以做到这一点，只需应用适当的方法来迭代数据，而不会浪费大量的周期。希望这会有所帮助。

于 2013-07-18T14:49:21.823 回答