# Manipulating Content, Attributes & Elements — JavaScript

Source: https://www.geekswithgeeks.com/en/javascript/js-dom-manipulating

> Changing what's on the page, and creating or removing nodes.

## Changing content

`textContent` sets plain text; `innerHTML` parses and inserts actual HTML.

```js
const box = document.querySelector("#box");
box.textContent = "New text";
box.innerHTML = "<strong>Bold text</strong>";
```

## Attributes & classes

`classList` gives clean methods for adding, removing and toggling CSS classes.

```js
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
link.classList.add("active");
link.classList.toggle("hidden");
```

## Creating & removing elements

Build a node, attach it with `appendChild`, and detach it later with `.remove()`.

```js
const li = document.createElement("li");
li.textContent = "New item";
document.querySelector("ul").appendChild(li);
li.remove();
```

## innerHTML caution

Avoid `innerHTML` with untrusted input — it can execute injected scripts (XSS). Prefer `textContent` for plain text.