AJAX and PHP

Even More DOMIn the previous exercise, you have created the list of elements by joining strings to compose asimple HTML structure. The same HTML structure can be built programmatically using theDOM. In the next exercise, you will generate this content programmatically:Hello Dude! Here's a cool list of colors for you:BlackOrangePinkChapter 2A DOM document is a hierarchical structure of elements, where each element can have one ormore attributes. In this HTML fragment, the single element with an attribute is , which hasan attribute called id with the value myDivElement. The root node that you can access through thedocument object is . When implementing the above HTML document, you will end up witha structure such as the one in the figure below:Figure 2.3: A Hierarchy of HTML ElementsIn Figure 2.3, you see an HTML structure formed of , , , , and elements, and four text nodes ("Hello…", "Black", "Orange", "Pink"). In the next exercise, you willcreate this structure using the DOM functions createElement, createTextNode, and appendChild.Time for Action—Even More DOM1. In the foundations folder, create a subfolder called evenmorejsdom.2. In the evenmorejsdom folder, create a file called evenmorejsdom.html, and add thefollowing code to it:AJAX Foundations: Even More JavaScript and DOM37