# Manipulating HTML
Once you have found the ElementNode you need, then you can start to manipulate the content.
let content = document.querySelector('p.first');
//find the first paragraph with the class "first".
content.textContent = 'The new paragraph content';
//change the text inside the paragraph
let main = document.querySelector('main');
//find the main element
let p = document.createElement('p');
//create a new paragraph
p.textContent = 'A new paragraph for the page';
//add some text inside the paragraph
main.appendChild(p);
//add the newly created paragraph as the last child of the main element
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Document Methods
document.createElement('p'); //creates an Element Node of the type provided
document.createTextNode('hello world'); //creates a TextNode
document.createDocumentFragment(); //creates a Document Fragment
1
2
3
2
3
# Node Properties
In the list below there are a series of property pairs. The first properties will return a NodeList or a single Node. Remember that Nodes can be element nodes, text nodes, or comments.
The second property will return a list of Element Nodes or a single Element Node.
node.childNodes v node.children
node.firstChild v. node.firstElementChild
node.lastChild v. node.lastElementChild
node.nextSibling v. node.nextElementSibling
node.previousSibling v. node.previousElementSibling
node.parentNode v. node.parentElement
1
2
3
4
5
6
2
3
4
5
6
These last three node properties return a single piece of information about the node.
node.nodeName; //returns the tagname, if an element node
node.nodeType; //returns the integer referencing the type of node. Eg: 1=element, 3=text
node.nodeValue; //returns the string inside a text node
1
2
3
2
3
# Node Methods
parentNode.appendChild(newNode); //add a new child node inside the parent
parentNode.removeChild(childNode); //remove the child from the parent
node.replaceChild(newNode); //replace one node with a new one
parentNode.contains(node); //checks if the node is a descendant of the parent
node.hasChildNodes(); //returns a boolean indicating if the node has child nodes
node.hasAttributes(); //returns a boolean if the node has attributes
parentNode.insertBefore(newNode, referenceNode); //inserts a new node into the DOM
//immediately before the reference node
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Element Properties
let c = element.className; //get or set the value of the class attribute
let list = element.classList; //get the list of classnames assigned to the element
element.classList.add(className);
element.classList.remove(className);
element.innerHTML = '<p>New paragraph</p>'; //add a new document fragment as a
//replacement child for the element's current child nodes
let nm = element.tagName; //retrieve the HTML element's tag name eg: P, LI, A, DIV
1
2
3
4
5
6
7
2
3
4
5
6
7