#018 - createDocumentFragment > innerHTML

I am finishing up my JavaScript side project. I am glad to experience the struggle of programming, as I want to see if I can embrace coding as a career.

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.

Above all, I am finding programming a therapeutic way to combine my interest in problem solving and creativity, which I find utterly refreshing. And as I continue to explore every nook and cranny of JavaScript, I am keen to apply best coding practices and web standards.

I don't bother with jQuery. I prefer vanilla JavaScript.

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.

I am gradually incorporating the latest JavaScript standards based on ES6. I still have a lot of videos to watch from WesBos to catch up on the latest web standards, alongside the State of JavaScript video that Google produced for its Google I/O 19 developer's conference.

The only hurdle that I need to overcome with my JavaScript side project is to fix a bug that is preventing me from cycling all the questions of my quiz project. The issue is related to the button element, which I have set an event listener to call a function to clear and flush out all child nodes from all listed DIV blocks.

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.

~Richard