合併HTML字符串

我試圖尋找合併兩個HTML字符串在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>';

任何想法？

來源

2013-07-18 t00f

只要您的附加信息僅包含要添加的元素（您可以輕鬆剝離即可），應該可以做到這樣的事情。

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

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

編輯

如果你必須能夠匹配上幾個IDS，那麼它可能是您可以使用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-18 14:49:21

不幸的是，保持相同的標識符是非常重要的;所以我有更多的複雜的HTML字符串與多個ID信息:) – t00f

合併HTML字符串

回答

相關問題