Hackforge Academy

Explanation

createElement() creates a new HTML element in memory.

Code:

const li = document.createElement('li');
li.textContent = 'New Item';

Explanation

appendChild() adds a newly created element as the last child of a parent element.

Code:

const li = document.createElement('li');
li.textContent = 'New Item';

document.getElementById('list')
  .appendChild(li);

Explanation

append() can add one or more nodes or text values to an element.

Code:

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

const li = document.createElement('li');
li.textContent = 'JavaScript';

list.append(li);

Explanation

remove() removes an element from the DOM.

Code:

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

item.remove();

Explanation

A complete dynamic DOM operation can create an element, configure it, add it to the page, and later remove it.

Code:

const button = document.createElement('button');
button.textContent = 'Delete';

button.addEventListener('click', () => {
  button.parentElement.remove();
});

document.body.append(button);