合并 HTML 字符串答案

【问题标题】：Merge HTML String合并 HTML 字符串
【发布时间】：2013-07-17 12:20:57
【问题描述】：

我正在尝试找到在 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>';

应将 context 变量修改为：

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

有什么想法吗？

【问题讨论】：

标签： javascript html dom merge

【解决方案1】：

应该能够做这样的事情，只要您的附加信息仅包含您要添加的元素（您可以轻松地将其剥离）。

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 的任何元素的类型，并为该类型进行查找。有很多方法可以做到这一点，只需应用适当的方法来迭代数据，而不会浪费大量的周期。希望这会有所帮助。

【讨论】：

不幸的是，保持相同的标识符非常重要；所以我有超过 1 个 id 信息的更复杂的 HTML 字符串 :)