REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Creating DOM Elements

AI & DATA SCIENCE // elements-creation

Create new DOM elements with document.createElement() and text nodes with createTextNode(). Use innerHTML for template strings.

Syntax

const el = document.createElement('div');
el.textContent = 'Hello';
el.className = 'card';
parent.appendChild(el);

Deep Dive Course

**document.createElement(tag)** creates a new element not yet in the DOM. You must append it to a parent to make it visible. Set properties (textContent, className, id, dataset) before inserting for better performance. Template literals with innerHTML can create complex structures, but watch for XSS.

1Understanding Creating DOM Elements

document.createElement(tag) creates a new element not yet in the DOM. You must append it to a parent to make it visible. Set properties (textContent, className, id, dataset) before inserting for better performance. Template literals with innerHTML can create complex structures, but watch for XSS.

💡

When creating multiple elements with different configurations, document.createElement() is safer. Use innerHTML templates for static, trusted content.

editor.html

// Build and insert a card
function createCard(title, body) {
  const card = document.createElement('div');
  card.className = 'card';
  card.dataset.testId = 'user-card';

  const h3 = document.createElement('h3');
  h3.textContent = title; // safe for user data

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

  card.append(h3, p);
  return card;
}
document.body.append(createCard('Hello', 'World'));

localhost:3000

2Practical Example

Here is a real-world application of Creating DOM Elements showing how it is used in production JavaScript code.

editor.html

// Using innerHTML for trusted templates
function createAlert(type, message) {
  const div = document.createElement('div');
  // Only trusted content here - no user input!
  div.innerHTML = `
    <div class="alert alert-${type}">
      <strong>${type.toUpperCase()}</strong> ${message}
    </div>
  `;
  return div.firstElementChild;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Creating DOM Elements:

1. Set all properties before appending to DOM

2. Use createElement for dynamic/user-data content (XSS safe)

3. Use innerHTML for complex static templates

⚠️

Tip: When creating multiple elements with different configurations, document.createElement() is safer. Use innerHTML templates for static, trusted content.

editor.html

// Build and insert a card
function createCard(title, body) {
  const card = document.createElement('div');
  card.className = 'card';
  card.dataset.testId = 'user-card';

  const h3 = document.createElement('h3');
  h3.textContent = title; // safe for user data

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

  card.append(h3, p);
  return card;
}
document.body.append(createCard('Hello', 'World'));

localhost:3000

Examples

Example 01Basic Usage

// Build and insert a card
function createCard(title, body) {
  const card = document.createElement('div');
  card.className = 'card';
  card.dataset.testId = 'user-card';

  const h3 = document.createElement('h3');
  h3.textContent = title; // safe for user data

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

  card.append(h3, p);
  return card;
}
document.body.append(createCard('Hello', 'World'));

Example 02Advanced Example

// Using innerHTML for trusted templates
function createAlert(type, message) {
  const div = document.createElement('div');
  // Only trusted content here - no user input!
  div.innerHTML = `
    <div class="alert alert-${type}">
      <strong>${type.toUpperCase()}</strong> ${message}
    </div>
  `;
  return div.firstElementChild;
}

Best Practices

Set all properties before appending to DOM
Use createElement for dynamic/user-data content (XSS safe)
Use innerHTML for complex static templates

Interview Question

When would you choose createElement over innerHTML?▼

Hint: User data vs trusted templates.

Use createElement when the content involves user data — textContent is XSS-safe. Use innerHTML for trusted, developer-controlled templates where you need complex HTML without the verbosity of building element by element. Never use innerHTML with unsanitized user input.

Exercises

MediumPractice using Creating DOM Elements in a real scenario.

View Solution

// Build and insert a card
function createCard(title, body) {
  const card = document.createElement('div');
  card.className = 'card';
  card.dataset.testId = 'user-card';

  const h3 = document.createElement('h3');
  h3.textContent = title; // safe for user data

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

  card.append(h3, p);
  return card;
}
document.body.append(createCard('Hello', 'World'));

Frequently Asked Questions

When would you choose createElement over innerHTML?▼

Related Functions

Modification-MethodsElements-ManipulationWhat-is-DOM