Creating and Appending Elements

// Create a new paragraph element
const paragraph = document.createElement('p');

// Create a new button element
const button = document.createElement('button');

// Create an image element
const image = document.createElement('img');

// Create a div element
const container = document.createElement('div');

// Create a text node
const textNode = document.createTextNode('This is a text node');

// Create a comment node (rarely needed but possible)
const commentNode = document.createComment('This is a comment');

Setting Text Content:

// Create a paragraph
const paragraph = document.createElement('p');

// Set its text content
paragraph.textContent = 'This is a new paragraph.';

// Alternative way to set text content
// paragraph.innerText = 'This is a new paragraph.';

Setting HTML Content:

// Create a div
const container = document.createElement('div');

// Set HTML content
container.innerHTML = '<strong>Bold text</strong> and <em>emphasized text</em>.';

// Note: Using innerHTML with user-provided content can lead to 
// security vulnerabilities (XSS attacks). Be careful!

Setting Attributes:

// Create an image
const image = document.createElement('img');

// Set attributes
image.src = '/images/example.jpg';
image.alt = 'Example image';
image.width = 300;
image.height = 200;

// Or use the setAttribute method
image.setAttribute('data-category', 'nature');
image.setAttribute('loading', 'lazy');

Working with Classes:

// Create a button
const button = document.createElement('button');

// Add classes
button.classList.add('btn');
button.classList.add('btn-primary');

// Toggle a class
button.classList.toggle('active');

// Check if it has a class
if (button.classList.contains('btn')) {
    console.log('Button has the btn class');
}

// Remove a class
button.classList.remove('active');

Setting Inline Styles:

// Create a div
const card = document.createElement('div');

// Set individual styles
card.style.backgroundColor = '#f5f5f5';
card.style.padding = '20px';
card.style.borderRadius = '8px';
card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

// Note: CSS property names with hyphens become camelCase in JavaScript
// 'background-color' becomes 'backgroundColor'

appendChild():

// Create a paragraph
const paragraph = document.createElement('p');
paragraph.textContent = 'This is a dynamically created paragraph.';

// Find the container where we want to add the paragraph
const container = document.getElementById('content-container');

// Append the paragraph to the container
container.appendChild(paragraph);

// Note: appendChild() adds the element as the last child

append():

A newer method that can add multiple nodes and text in one call:

// Create elements
const heading = document.createElement('h2');
heading.textContent = 'Product Details';

const description = document.createElement('p');
description.textContent = 'This is our newest product.';

// Append multiple children at once
container.append(heading, description, 'Additional text can be added directly');

prepend():

Adds nodes to the beginning of the parent's children:

// Create a header element
const header = document.createElement('header');
header.textContent = 'Important Announcement';

// Add to the beginning of the container
container.prepend(header);

insertBefore():

Inserts a node before a reference node as a child of a specified parent node:

// Create a new list item
const newItem = document.createElement('li');
newItem.textContent = 'New Item';

// Get the parent element
const list = document.getElementById('my-list');

// Get a reference to the third item in the list
const thirdItem = list.children[2];

// Insert the new item before the third item
list.insertBefore(newItem, thirdItem);

insertAdjacentElement():

Offers precise control over where to insert an element relative to another:

// Create a notice element
const notice = document.createElement('div');
notice.className = 'notice';
notice.textContent = 'Please read carefully!';

// Get a reference element
const formTitle = document.getElementById('form-title');

// Insert positions:
formTitle.insertAdjacentElement('beforebegin', notice); // Before the element itself
// formTitle.insertAdjacentElement('afterbegin', notice);  // Inside the element, before its first child
// formTitle.insertAdjacentElement('beforeend', notice);   // Inside the element, after its last child
// formTitle.insertAdjacentElement('afterend', notice);    // After the element itself

Creating Nested Elements:

// Create a card element
const card = document.createElement('div');
card.className = 'card';

// Create and append card header
const cardHeader = document.createElement('div');
cardHeader.className = 'card-header';
card.appendChild(cardHeader);

// Create and append title to header
const title = document.createElement('h2');
title.textContent = 'Product Name';
cardHeader.appendChild(title);

// Create and append card body
const cardBody = document.createElement('div');
cardBody.className = 'card-body';
card.appendChild(cardBody);

// Create and append description to body
const description = document.createElement('p');
description.textContent = 'This is a product description.';
cardBody.appendChild(description);

// Add the card to the page
document.getElementById('product-container').appendChild(card);

Creating Elements From Data:

Often we'll create elements based on data from an API or other source:

// Sample data that might come from an API
const products = [
    { id: 1, name: 'Laptop', price: 999.99, inStock: true },
    { id: 2, name: 'Smartphone', price: 699.99, inStock: false },
    { id: 3, name: 'Headphones', price: 149.99, inStock: true },
];

// Get the container
const productList = document.getElementById('product-list');

// Create elements for each product
products.forEach(product => {
    // Create product card
    const productCard = document.createElement('div');
    productCard.className = 'product-card';
    productCard.dataset.productId = product.id;
    
    // Create product name
    const nameElement = document.createElement('h3');
    nameElement.textContent = product.name;
    productCard.appendChild(nameElement);
    
    // Create price
    const priceElement = document.createElement('div');
    priceElement.className = 'price';
    priceElement.textContent = `$${product.price.toFixed(2)}`;
    productCard.appendChild(priceElement);
    
    // Create stock indicator
    const stockElement = document.createElement('span');
    stockElement.className = product.inStock ? 'in-stock' : 'out-of-stock';
    stockElement.textContent = product.inStock ? 'In Stock' : 'Out of Stock';
    productCard.appendChild(stockElement);
    
    // Add to the list
    productList.appendChild(productCard);
});

// Create a document fragment
const fragment = document.createDocumentFragment();

// Add 100 list items to the fragment (no DOM reflows yet)
for (let i = 1; i <= 100; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = `Item ${i}`;
    fragment.appendChild(listItem);
}

// Add the fragment to the DOM (only one reflow/repaint)
const list = document.getElementById('my-list');
list.appendChild(fragment);

function createUserCard(user) {
    const cardElement = document.createElement('div');
    cardElement.className = 'user-card';
    
    cardElement.innerHTML = `
        <img src="${user.avatar}" alt="${user.name}" class="user-avatar">
        <div class="user-info">
            <h3 class="user-name">${user.name}</h3>
            <p class="user-role">${user.role}</p>
            <p class="user-email">${user.email}</p>
        </div>
        <div class="user-actions">
            <button class="btn view-profile" data-id="${user.id}">View Profile</button>
        </div>
    `;
    
    // Add event listener to the button
    const viewButton = cardElement.querySelector('.view-profile');
    viewButton.addEventListener('click', () => viewUserProfile(user.id));
    
    return cardElement;
}

// Usage
const userContainer = document.getElementById('users');
users.forEach(user => {
    userContainer.appendChild(createUserCard(user));
});

// Get an existing element
const originalItem = document.querySelector('.item-template');

// Clone it (false means don't clone children, true means clone children too)
const shallowClone = originalItem.cloneNode(false);
const deepClone = originalItem.cloneNode(true);

// Modify the clone
deepClone.id = 'new-item-' + Date.now();
deepClone.querySelector('.item-title').textContent = 'New Item Title';

// Add it to the DOM
document.getElementById('items-container').appendChild(deepClone);