JAVASCRIPT
Dynamically Creating and Appending Complex DOM Elements
Learn how to programmatically create new HTML elements, set their properties, and append them to the DOM efficiently using JavaScript for dynamic content.
function createAndAppendCard(parentSelector, titleText, bodyText) {
const container = document.querySelector(parentSelector);
if (!container) {
console.error('Parent element not found:', parentSelector);
return;
}
const cardDiv = document.createElement('div');
cardDiv.className = 'card';
const cardTitle = document.createElement('h3');
cardTitle.textContent = titleText;
const cardBody = document.createElement('p');
cardBody.textContent = bodyText;
const actionButton = document.createElement('button');
actionButton.textContent = 'View Details';
actionButton.addEventListener('click', () => {
alert(`Details for: ${titleText}`);
});
cardDiv.appendChild(cardTitle);
cardDiv.appendChild(cardBody);
cardDiv.appendChild(actionButton);
container.appendChild(cardDiv);
}
// Example Usage:
// Assume a div with id="app" exists in your HTML
// createAndAppendCard('#app', 'New Feature A', 'This is a description for feature A.');
// createAndAppendCard('#app', 'Important Update B', 'Details about the latest software update.');
How it works: This snippet demonstrates how to programmatically construct a complex HTML structure (a card with a title, paragraph, and button) using JavaScript's DOM API. It creates each element, sets their text content and class names, attaches an event listener to the button, and then appends them hierarchically to form the card. Finally, the complete card element is appended to a specified parent element in the document, allowing for dynamic content generation.