DOM

How to Create DOM Elements

Use createElement() and appendChild() or template literals

Quick Answer (2024 ES6+ Way)

javascript

const div = document.createElement('div');
div.className = 'card';
div.textContent = 'Hello World';
document.body.appendChild(div);

Live Example

javascript

function createCard(title, content) {
  const card = document.createElement('div');
  card.className = 'card';
  
  const heading = document.createElement('h2');
  heading.textContent = title;
  
  const paragraph = document.createElement('p');
  paragraph.textContent = content;
  
  card.appendChild(heading);
  card.appendChild(paragraph);
  
  return card;
}

// Usage
const myCard = createCard('Title', 'Content');
document.body.appendChild(myCard);

Common Variations

Using insertAdjacentHTML

javascript

element.insertAdjacentHTML('beforeend', `
  <div class="card">
    <h2>${title}</h2>
  </div>
`);

Setting Multiple Attributes

javascript

const img = document.createElement('img');
Object.assign(img, { src: 'pic.jpg', alt: 'Picture' });

❌ Don't Do This (Outdated Way)

Avoid innerHTML for untrusted content

javascript

// DON'T DO THIS (XSS risk with user input)
element.innerHTML = '<div>' + userInput + '</div>';

Browser Support

✓ Works in all modern browsers (ES5+)

#dom#create#element