<p>In this lab, you will learn how to dynamically create elements, add them to the DOM, and manipulate their attributes using plain JavaScript. You will be provided with an HTML file containing a single <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">div</code> element with an id <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">container</code>. Your task is to add more elements inside this <code data-prestyled="true" class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono">container</code> using JavaScript, manipulate their attributes, and perform certain tasks when the elements are clicked.</p>
<p>Below are the challenges for this lab:</p>

DOM manipulation lab