How do I add a UL to a div with the ID of JS?

To add a <ul> (unordered list) to a <div> with the ID of "JS" using JavaScript, you can follow these steps:

1. Get the div Element: First, you need to get a reference to the <div> element using its ID, which is "JS". You can achieve this using document.getElementById('JS').

2. Create the UL Element: Create a new <ul> element using document.createElement('ul').

3. Create List Items (LI): Now, you'll create the list items (<li>) that will go inside the <ul>. You can create multiple list items as needed using document.createElement('li'). Add text content to each <li> element using textContent or innerHTML.

4. Append List Items to the UL: Append each of the created <li> elements to the <ul> using appendChild().

5. Append the UL to the div: Finally, append the <ul> element to the <div> using appendChild().

6. Complete JavaScript code:

document.addEventListener('DOMContentLoaded', function() {
   const targetDiv = document.getElementById('JS');
   if (targetDiv) {
     const ul = document.createElement('ul');
     const listItem1 = document.createElement('li');
     listItem1.textContent = 'Item 1';
     const listItem2 = document.createElement('li');
     listItem2.textContent = 'Item 2';
     const listItem3 = document.createElement('li');
     listItem3.textContent = 'Item 3';
     ul.appendChild(listItem1);
     ul.appendChild(listItem2);
     ul.appendChild(listItem3);
     targetDiv.appendChild(ul);
     console.log('UL element added to the div with ID JS.');
   } else {
     console.log('Div with ID "JS" not found.');
   }
});

This code first checks if an element with ID 'JS' exists to avoid errors. Then, it creates the list and appends it to the desired <div>. Remember to include this JavaScript code in your HTML file or in a linked script file.

Learn more about this