javascript - Merge HTML String -
i trying find best way merge 2 html string in javascript (jquery/angularjs) such :
var context = '<html> <head> </head> <body> <ul id="list"> <li>itema</li> <li>itemb</li> </ul> </body> </html>'; merged :
var additionnalinfo = '<ul id="list"> <li>itemc</li> <li>itemd</li> </ul>'; should modify context variable :
'<html> <head> </head> <body> <ul id="list"> <li>itema</li> <li>itemb</li> <li>itemc</li> <li>itemd</li> </ul> </body> </html>'; any idea ?
should able this, long additional info contains elements want add (which can strip down to).
var additionnalinfo = '<li>itemc</li> <li>itemd</li>'; var list = getelementbyid('list'); list.innerhtml += additionalinfo; edit
if must able match on several ids, possible use jquery iterate through elements of type (all lists example), , check ids equality, append above. ex:
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; } }); there more efficient ways of doing this, should basis need. loop through of "parent" list elements in additional html. compare ids against list ids within existing html, , if same, append new innerhtml existing list.
you can make more generic once parse html string, type of element id, , find type. lot of ways this, matter of applying proper method of iterating through data without wasting ton of cycles. hope helps bit more.
Comments
Post a Comment