Chapter project

Manipulating HTML elements with JavaScript

Take the HTML code below:

<div class="output">
    <h1>Hello</h1>
    <div>Test</div>
    <ul>
        <li id="one">One</li>
        <li class="red">Two</li>
    </ul>
    <div>Test</div>
</div>

Take the following steps (and experiment further) to understand how HTML elements can be manipulated with JavaScript code.

1. Select the element with the class output.
2. Create another JavaScript object called mainList and select only the ul tag that is within the output element. Update the ID of that ul tag to mainList.
3. Search for the tagName of each div, and output them into the console as an array.
4. Using a for loop, set the ID of each of the div tags to id with a numeric value of the order they appear within output. Still within the loop, alternate the color of the contents of each...