Content Manipulation

textContent:

Retrieves or sets the text content of an element, excluding any HTML tags.

const element = document.getElementById('myElement');
element.textContent = 'New text content';

innerText:

Similar to textContent, but it takes into account the styling of the element.

const element = document.getElementById('myElement');
element.innerText = 'Updated text';

innerHTML:

Retrieves or sets the HTML content (including tags) of an element.

const element = document.getElementById('myElement');
element.innerHTML = '<p>New paragraph with <strong>HTML</strong> content</p>';

outerHTML:

Retrieves or sets the HTML content of an element, including the element itself.

const element = document.getElementById('myElement');
element.outerHTML = '<div id="newElement">Updated content</div>';

value:

Get or set the value of form elements like or .

const input = document.querySelector('input');
input.value = 'New input value';

setAttribute():

Sets a specific attribute's value on an element.

const element = document.getElementById('myElement');
element.setAttribute('title', 'New tooltip text');

getAttribute():

Retrieves the value of a specified attribute.

const element = document.getElementById('myElement');
const title = element.getAttribute('title');
console.log(title);

removeAttribute():

Removes an attribute from an element.

const element = document.getElementById('myElement');
element.removeAttribute('title');

appendChild():

Appends a new child element to a parent element.

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
parent.appendChild(newElement);

insertBefore():

Inserts a new node before an existing child node.

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
const referenceNode = document.getElementById('existingElement');
parent.insertBefore(newElement, referenceNode);

replaceChild():

Replaces an existing child element with a new one.

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
const oldElement = document.getElementById('oldElement');
parent.replaceChild(newElement, oldElement);

cloneNode():

Creates a copy of an element (can be a deep copy including its child nodes or shallow copy).

const element = document.getElementById('myElement');
const clone = element.cloneNode(true); // true for deep clone