Using DOMParser to create HTML and SVG fragment
Posted on October 28, 2020
If you need to create HTML or SVG fragments in javascript, there's a well supported interface that converts string into regular nodes.
HTML element
So, instead using createElement API that is a little verbose:
const div = document.createElement('div')
div.classList.add('wrapper')
const p = document.createElement('p')
p.innerText = 'Hello!'
div.appendChild(p)
document.body.appendChild(div)
You can do the same using DOMParser this way:
const parser = new DOMParser()
const str = `<div class="wrapper">
<p>Hello parser!</p>
</div>`
const frag = parser.parseFromString(str, 'text/html').body.childNodes[0]
document.body.append(frag)
SVG element
If you need to create an SVG on the fly, the old API requires specific methods:
const xmlns = "http://www.w3.org/2000/svg"
const svg = document.createElementNS(xmlns, 'svg')
svg.setAttributeNS(null, 'viewBox', '0 0 100 100')
svg.classList.add('wrapper')
const rect = document.createElementNS(xmlns, 'rect')
rect.setAttributeNS(null, 'width', '50')
rect.setAttributeNS(null, 'height', '50')
svg.appendChild(rect)
document.body.appendChild(svg)
Here the equivalent version with DOMParser:
const parser = new DOMParser()
const str = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="50" height="50"></rect>
</svg>`
const frag = parser.parseFromString(str, 'text/html').body.childNodes[0]
document.body.append(frag)
In general, much cleaner and generic as well as less verbose!