---
id: create-modify-element
# title: Create / modify DOM nodes
# sidebar_label: DOM Manipulation
title: DOM Manipulation
slug: /
---
import Admonition from "../components/Admonition"
import Accordion from "../components/Accordion"
import MDN from "../components/MDNBadge"
## Finding elements
### 1. querySelector()
This method returns the **first element that matches the CSS selector**. If no match is found, it returns `null`.
```js
document.querySelector(selector);
//
document.querySelector(".box"); // returns .box
document.querySelector(".not-found"); // null
```
This method is also available on all DOM nodes. If you want to look within a specific element, this is very useful.
```js
// Example - .outer > .inner
outerEle.addEventListener((ev) => {
var innerEle = ev.target.querySelector(".inner");
});
```
### 2. querySelectorAll()
This method returns **all the elements that match** the specified CSS selector.
It returns a **static NodeList**, which contains the matching elements. If no match is found, it returns empty NodeList.
:::note How to consume NodeList?
NodeList is a iterable, so it can be iterated using `for..of` loop, or converted to a array using spread syntax like `[...nodelist]`.
Here, the NodeList is static - meaning any changes in the DOM later does not affect the content of the existing collection. More about NodeList [here](https://developer.mozilla.org/en-US/docs/Web/API/NodeList).
:::
```js
var paras = document.querySelectorAll("p");
for (var p of paras) {
p.className = "note";
}
```
## Create / insert element
### 1. createElement()
It creates a new HTML element, taking the tag name (`"div"`) as argument.
```js
document.createElement("div")
// creates
```
To add some text inside a element, you'll need to create a text node.
`createTextNode` method takes a string as input and returns a new TextNode.
```js
var ele = document.createElement("div")
var newText = document.createTextNode("Hello world")
ele.appendChild(newText)
//
Hello world
```
### 2. setAttribute()
It sets a attribute on the current element.
`Element.setAttribute(name, value)`
`name` - name of the attribute to add. Ex- "type".
`value` - value of the attribute. Ex- "text".
```js
var ele = document.createElement("input")
ele.setAttribute("type", "text")
//
```
### 3. appendChild()
It inserts a new element as the last child of the current element.
`Element.appendChild(newElement)`
```js
var eleDiv = document.createElement("div")
var eleH1 = document.createElement("h1")
eleDiv.appendChild(eleH1)
//
```
If newElement is already a child of another element,
then it is removed from its existing parent and then added to the new parent.
If newElement is a DocumentFragment, then - instead of adding the fragment itself as a child,
the entire content of the fragment is added as children of the parent element.
There is a newer api called .append(), which is a superset of .appendChild().
⭐️ .append() allows you to insert multiple child elements in a single call. It also allows string as input, which gets converted to Text node.
```js
ele1.append(ele2, ele3, 'hello world')
```
💔 .appendChild() only allows inserting a single element at a time.
### 4. removeChild()
`Element.removeChild(childElement)`
This method tries to remove a child element from the parent and returns the removed node.
If the element to be removed is not a child of the parent element, it throws a `NotFoundError` DOMException.
```js
//