#018 - createDocumentFragment > innerHTML
On a Segway note, I have recently secured a new role at work, with a focus in software development. I am cautiously optimistic, but the irony is I will likely be learning a whole lot more programming outside of my part-time work. And yes, I am still contracted on part-time hours. There are days where I feel like a contractor, even though I am contracted as a permanent staff.
You may have gathered that I discovered the createDocumentFragment() method. In layman's term, I can best describe the createDocumentFragment as a special invisible container that will quickly refresh any changed data that you may want to refresh on the DOM using various HTML elements. Except, the createDocumentFragment doesn't appear on the DOM, but is faster to process data than using the createElement() method directly. From what I understand, the createDocumentFragment() method doesn't live in a persistent environment on the DOM.
Mind you, the createElement() method is quicker and more secure than deploying the innerHTML property to generate content to the DOM.
As I still have a strong interest in cybersecurity, I removed any reference of innerHTML and created multiple functions that would render HTML elements to the DOM using the createElement() method.
I recently tinkered with my codebase to use the createDocumentFragment to make my code a little more efficient. It would be nice to manually calculate the difference in performance and speed, especially when deploying the code for a mobile application.
The stumbling block for me is an 'Uncaught TypeError', which is preventing a button from being removed inside the last DIV block using the removeChild() method. And just for the record, I'm not convinced the createDocumentFragment() method is in confliction with the bug, as I tried alternative code without using the createDocumentFragment() method. In fact, there was no difference either way.