[Javascript] Pls convert ugly innerHTML to use DOM Objects

[TriMoon]

I see your Javascript is useing a lot of string versions for the tag(s) generated, and the final product needs to be added using innerHTML=. Could you please convert those to use real DOM-Element objects, so the final result can be applied to a DOM-Element also?

Eg. use createElement etc....

[Mat-thieu]

@TriMoon If the performance of innerHTML bothers you that much, you can do this to prevent the reflow;

const qrCodeString = qr.createSvgTag(8);

function htmlStringToDocumentFragment(htmlString) {
   var temp = document.createElement('span');
   var frag = document.createDocumentFragment();
   temp.innerHTML = htmlString;
   frag.appendChild(temp.firstChild);

   return frag;
}

const qrCodeFragment = htmlStringToDocumentFragment(qrCodeString);

document.body.appendChild(qrCodeNode);

But it's honestly no big deal..... at al...... unless you need to create 10+ QRs instantly but that use case is rare and someone would be able to optimize it with the code above.

[TriMoon]

For use in Ecmascript libraries that dynamically generate content (most of them if not all; use DOM methods), this library should return a real DOM fragment. Others that want to work with string code can easily get a hold of that using the innerHTML/outerHTML properties on the returned DOM object. Another point is that manupulating parts of the result is much easier when working with DOM objects.

Besides all the benefits, using strings to create a HTML block is plain ancient and doesn't fit with new technology like QRCode 🤣

[marksteward]

Can I suggest you submit a pull request instead of complaining stuff's ugly and doesn't fit?

[TriMoon]

I've considered to do exactly that, but then my PR would completely replace his code, eg. would change author and i would have to provide support for it 😜