createElement & insertBefore - JavaScript DOM

createElement() Syntax

const element = document.createElement(tagName);
// Returns a new Element of the specified type

Basic Usage

// Create a paragraph
const p = document.createElement('p');
p.textContent = 'Hello, World!';
p.className = 'message';
document.body.appendChild(p);

// Create a link
const a = document.createElement('a');
a.href = 'https://example.com';
a.textContent = 'Visit Example';
a.target = '_blank';
a.rel = 'noopener noreferrer';

// Create an image
const img = document.createElement('img');
img.src = 'photo.jpg';
img.alt = 'Description';
img.width = 300;

Building Complex Structures

// Build a card component
function createCard(title, body, imageUrl) {
  const card = document.createElement('div');
  card.className = 'card';

  const img = document.createElement('img');
  img.src = imageUrl;
  img.alt = title;

  const h3 = document.createElement('h3');
  h3.textContent = title;

  const p = document.createElement('p');
  p.textContent = body;

  const btn = document.createElement('button');
  btn.textContent = 'Read More';
  btn.addEventListener('click', () => {
    console.log('Clicked:', title);
  });

  card.append(img, h3, p, btn);
  return card;
}

// Usage
const container = document.getElementById('cards');
container.appendChild(createCard(
  'AI Detection',
  'Learn to identify AI-generated content.',
  'ai-detection.jpg'
));

insertBefore() Syntax

parentNode.insertBefore(newNode, referenceNode);
// Inserts newNode before referenceNode
// If referenceNode is null, appends to end

Insertion Methods Comparison

insertBefore Examples

const list = document.getElementById('list');

// Insert at the beginning
const first = document.createElement('li');
first.textContent = 'New first item';
list.insertBefore(first, list.firstChild);

// Insert before a specific item
const items = list.querySelectorAll('li');
const newItem = document.createElement('li');
newItem.textContent = 'Inserted before item 3';
list.insertBefore(newItem, items[2]);

// Insert after (helper function)
function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(
    newNode,
    referenceNode.nextSibling
  );
}

Performance: DocumentFragment

// Adding many elements? Use a DocumentFragment
// to batch DOM operations (single reflow)
const frag = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  frag.appendChild(li);
}

// Single DOM insertion = single reflow
document.getElementById('list').appendChild(frag);