JAVASCRIPT
Dynamically Create and Append New Elements
Learn to efficiently generate new HTML elements from JavaScript data, set their content, and append them to a specific parent container in the DOM.
const container = document.getElementById('myContainer');
const items = ['First Item', 'Second Item', 'Third Item'];
items.forEach(itemText => {
const listItem = document.createElement('li');
listItem.textContent = itemText;
listItem.className = 'dynamic-item'; // Add a class for styling
container.appendChild(listItem);
});
// Example: Adding a new paragraph
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a dynamically added paragraph.';
newParagraph.style.color = 'green';
container.appendChild(newParagraph);
How it works: This snippet demonstrates creating new HTML elements dynamically using `document.createElement()`. It then sets their `textContent` and adds a CSS class for styling. Finally, `appendChild()` is used to insert these newly created elements as children of an existing parent element in the DOM, making them visible on the webpage. This is crucial for building dynamic interfaces from data.