Creating Elements

document.createElement() creates a new element node.

Basic Usage

// Create element
const div = document.createElement('div');
const img = document.createElement('img');
const button = document.createElement('button');

// Set properties before adding to DOM
div.className = 'container';
div.id = 'main';
button.textContent = 'Click me';
img.src = 'photo.jpg';
img.alt = 'A photo';

Building Complex Elements

function createCard(title, content, imageUrl) {
  const card = document.createElement('div');
  card.className = 'card';
  
  const image = document.createElement('img');
  image.src = imageUrl;
  image.alt = title;
  
  const heading = document.createElement('h3');
  heading.textContent = title;
  
  const text = document.createElement('p');
  text.textContent = content;
  
  card.appendChild(image);
  card.appendChild(heading);
  card.appendChild(text);
  
  return card;
}

// Usage
const myCard = createCard(
  'Hello',
  'This is a card',
  'image.jpg'
);
document.body.appendChild(myCard);

Setting Attributes

const link = document.createElement('a');

// Method 1: setAttribute
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener');

// Method 2: Direct property
link.href = 'https://example.com';
link.target = '_blank';

// Method 3: dataset
link.dataset.id = '123';
link.dataset.action = 'view';
// Creates: data-id="123" data-action="view"

Adding to DOM

const container = document.querySelector('.container');
const newElement = document.createElement('p');
newElement.textContent = 'New paragraph';

// appendChild - adds at end
container.appendChild(newElement);

// insertBefore - adds before reference
container.insertBefore(newElement, referenceElement);

// Modern methods
container.append(newElement); // Can add multiple
container.prepend(newElement); // Adds at start
newElement.before(referenceElement); // Before reference
newElement.after(referenceElement); // After reference

innerHTML gets or sets the HTML content of an element.

Reading innerHTML

const container = document.querySelector('.container');
console.log(container.innerHTML);
// Returns all child HTML as a string

Setting innerHTML

// Replace all content
container.innerHTML = '<h1>New Content</h1><p>New paragraph</p>';

// Append content
container.innerHTML += '<p>Appended</p>';

// WARNING: This destroys existing elements and event listeners!
const existing = container.querySelector('button');
existing.addEventListener('click', handler);

container.innerHTML = 'New content'; // existing button is destroyed!
// handler is lost

XSS Vulnerability

// DANGEROUS - Never use with user input!
const userInput = '<script>alert("XSS")</script>';
container.innerHTML = userInput; // Executes script!

// SAFE - Use textContent for user input
container.textContent = userInput; // Shows as text

// SAFE - Sanitize before using innerHTML
function sanitize(html) {
  const div = document.createElement('div');
  div.textContent = html;
  return div.innerHTML;
}
container.innerHTML = sanitize(userInput);

When to Use innerHTML

// GOOD: Static, known content
container.innerHTML = `
  <div class="card">
    <h2>${title}</h2>
    <p>${content}</p>
  </div>
`;

// BETTER: Use DOM methods for dynamic content
const card = document.createElement('div');
card.className = 'card';
const h2 = document.createElement('h2');
h2.textContent = title;
card.appendChild(h2);
container.appendChild(card);

Performance Consideration

// BAD: Multiple innerHTML modifications
for (let i = 0; i < 100; i++) {
  container.innerHTML += `<div>Item ${i}</div>`; // Re-parses each time!
}

// GOOD: Build string, set once
let html = '';
for (let i = 0; i < 100; i++) {
  html += `<div>Item ${i}</div>`;
}
container.innerHTML = html; // Parse once

// BETTER: Use DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
container.appendChild(fragment); // Single DOM update

insertAdjacentHTML parses HTML and inserts it at a specified position relative to the element.

Positions

const element = document.querySelector('.target');

// beforebegin: Before the element itself
// afterbegin: Just inside the element, before its first child
// beforeend: Just inside the element, after its last child
// afterend: After the element itself

const html = '<div class="new">New content</div>';

element.insertAdjacentHTML('beforebegin', html); // Before element
element.insertAdjacentHTML('afterbegin', html);  // First child
element.insertAdjacentHTML('beforeend', html);   // Last child
element.insertAdjacentHTML('afterend', html);    // After element

Visual Example

<!-- beforebegin -->
<div class="target">
  <!-- afterbegin -->
  Existing content
  <!-- beforeend -->
</div>
<!-- afterend -->

Comparison with innerHTML

// innerHTML replaces ALL content
container.innerHTML = '<p>New</p>'; // Destroys existing

// insertAdjacentHTML adds without destroying
container.insertAdjacentHTML('beforeend', '<p>New</p>'); // Preserves existing

// insertAdjacentHTML doesn't affect existing elements
const existing = container.querySelector('button');
existing.addEventListener('click', handler);

container.insertAdjacentHTML('beforeend', '<p>New</p>');
// existing button and its listener preserved!

Practical Example

function addMessage(text, type = 'info') {
  const messages = document.getElementById('messages');
  
  const html = `
    <div class="message message-${type}">
      <span>${text}</span>
      <button class="close">&times;</button>
    </div>
  `;
  
  messages.insertAdjacentHTML('beforeend', html);
}

// Add message without destroying existing ones
addMessage('Hello!', 'info');
addMessage('Error!', 'error');

Performance

// insertAdjacentHTML is often faster than innerHTML
// because it doesn't destroy existing content

// For adding multiple elements:
// 1. Build HTML string
// 2. Use insertAdjacentHTML once
// 3. Much faster than multiple appendChild calls

let html = '';
for (let i = 0; i < 100; i++) {
  html += `<div>Item ${i}</div>`;
}
container.insertAdjacentHTML('beforeend', html);