Objective

Create a function to replicate the behavior of innerHTML when it's retrieved.

Difficulty

Hard

Description

In the chapter HTML DOM — Elements, we came across the innerHTML property of element nodes. When retrieved, it returns back the HTML content inside the element node. When set, it replaces the content inside the element node with the given value.

The algorithm used when we get innerHTML is referred to as the HTML serialization algorithm.

Serialization, in this context, means to go from an object version of a node to its corresponding string-based version.

The algorithm used when we set innerHTML is referred to as the HTML parsing algorithm.

It is a bit more complex than serialization as we have to analyze the provided value (to set innerHTML to) for correct grammar and a bunch of other things such as attributes, their values starting and ending tags, comments, textual pieces of content, and so on.

In this exercise, you have to create a method getInnerHTML(), of the Element interface, that replicates the HTML serialization algorithm, as used by innerHTML when we access the property in a get context.

You must reverse-engineer the algorithm, i.e. see how innerHTML works on a handful of examples, and then implement the method to work in the same way.