Today's Question:  What does your personal desk look like?        GIVE A SHOUT

 ALL


  Understand Virtual DOM

With the popularity of React, the internals and implementation of Virtual DOM has becoming top discussed topic in tech communities and interviews. This post will give an introduction of Virtual DOM and how to implement a simple Virtual DOM logic.How to understand Virtual DOMIn early days, front end developers would update a webpage view based on the data status change(usually after making AJAX call). But it brings performance penalties when there is frequent update as it would cause page reflow and repaint and in turn lead to page stuck.Hence people comes out a solution which is to just update...

9,164 1       JAVASCRIPT DOM VIRTUAL DOM


  Convert HTML to DOM elements using JavaScript

In some cases, one would want to convert a HTML string to the DOM elements so that JavaScript can handle them easily. This is frequently used when one get some data from third party APIs where the data is in HTML format.In JavaScript, there are a couple of ways one can use to convert HTML to DOM elements.DOMParserdocument.createElementDOMParserDOMParser can parse XML or HTML source stored in a string into a DOM Document. After the conversion, the normal JavaScript call of handling DOM elements can be used, like getting element by id or using selectors.For example, assuming there...

35,467 1       JAVASCRIPT HTML DOM DOMPARSER DOCUMENT.CREATEELEMENT


  insertAdjacentHTML() Enables Faster HTML Snippet Injection

In Firefox 8, we’ve added support for insertAdjacentHTML(). It’s an ancient feature of Internet Explorer that has recently been formalized in HTML5 and then spun out into the DOM Parsing specification. The bad news is that Firefox is the last major browser to implement this feature. The good news is that since other major browsers implement it already, you can start using it unconditionally as soon as the Firefox 8 update has been rolled out to users.Basic UsageinsertAdjacentHTML(position, markup) is a method on HTMLElementDOM nodes. It takes tw...

3,632 0       HTML5 DOM INSERTAJACENTHTML FIREFOX


  Removing all child nodes from an element

When manipulating the DOM, it's often useful to remove all child nodes from a specific element. This typically comes in handy when you're looking to replace the content of an element with a separate form element, such as an <input>, so the user can edit the actual value.Here's an example of something I recently created that illustrates my point:Get the Flash Player to see this player.These "dynamic form elements" are written to the page only when the user performs a certain action; in this case: clicking on a table cell.The HTML for the table cell ...

3,114 0       JAVASCRIPT CODE JS DOM REMOVE ALL CHILDREN CLEAR