How do you create, modify, and remove DOM elements dynamically? DOM elements को dynamically create, modify, और remove कैसे करें?

JavaScript provides methods to build up new elements, change existing ones, and clean up elements that are no longer needed.

// Creating an element
const div = document.createElement('div');
div.className = 'card';
div.textContent = 'Hello World';

// Setting attributes
div.setAttribute('data-id', '123');
div.id = 'myCard';

// Adding to the DOM
document.body.appendChild(div);

// Alternative: append (allows multiple nodes/strings, no return value needed)
document.body.append(div, 'some text');

// Inserting at a specific position
const reference = document.getElementById('reference');
reference.before(div);   // insert before reference
reference.after(div);    // insert after reference
reference.parentNode.insertBefore(div, reference); // older API equivalent

// Modifying content
div.textContent = 'Updated text'; // safe, treats content as plain text
div.innerHTML = '<strong>Bold</strong> text'; // parses HTML, XSS risk with user input

// Modifying styles and classes
div.style.color = 'blue';
div.style.backgroundColor = '#f0f0f0';
div.classList.add('active');
div.classList.remove('hidden');
div.classList.toggle('selected');
div.classList.contains('active'); // true

// Removing elements
div.remove(); // modern, direct removal
// Older way:
// div.parentNode.removeChild(div);

// Cloning an element
const clone = div.cloneNode(true); // true = deep clone (includes children)
document.body.appendChild(clone);

// Clearing all children efficiently
const container = document.getElementById('container');
container.replaceChildren(); // removes all children, modern approach
// Older way: while (container.firstChild) container.removeChild(container.firstChild);