JAVASCRIPT
Dynamically Create and Append Complex DOM Elements
Learn how to programmatically create new HTML elements, set their properties, and append them to the document using JavaScript for dynamic content generation and UI updates.
function createComplexElement(data) {
const container = document.createElement('div');
container.className = 'item-card';
container.setAttribute('data-id', data.id);
const title = document.createElement('h2');
title.textContent = data.title;
const description = document.createElement('p');
description.textContent = data.description;
const button = document.createElement('button');
button.textContent = 'View Details';
button.addEventListener('click', () => {
alert(`Details for: ${data.title}`);
});
container.appendChild(title);
container.appendChild(description);
container.appendChild(button);
return container;
}
// Usage:
const productData = {
id: 123,
title: 'Awesome Product',
description: 'This is a fantastic product with many features.'
};
const newProductCard = createComplexElement(productData);
document.getElementById('app-root').appendChild(newProductCard);
How it works: This snippet demonstrates how to dynamically create multiple HTML elements (div, h2, p, button), set their properties like text content and classes, and then append them as children to form a complex UI component. Finally, the entire component is appended to an existing element in the DOM (e.g., a div with id 'app-root'), making it visible on the page. It also includes an event listener for interactive elements.