Here's an approach:
Duplication of node. Use the standard DOM method Node.cloneNode(true)
to create deep clones of a node.
Redefinition of IDs. The goog.ui.Component
framework uses goog.ui.IdGenerator
extensively to generate unique IDs of the form <ID>:<increment>
(there's another implementation in goog.events.getUniqueId
if you don't mind the events baggage). With the same underlying idea you can create your own ID generator.
Tree walking. The goog.dom
namespace has a number of node iterators that can be reliably used to arrive at elements whose IDs must be changed.
I set up a JSBin example that creates as many clones as replacement sets are specified in the data array, uniquifies IDs, and appends the clones to #svgs
.
If DOM methods are undesirable, Closure Library also provides an html SAX parser (goog.string.html.HtmlParser
under "third-party") which can serve as the base of a DOM-less approach (note: the parser doesn't support SVG elements out of the box).