# Element Modification

Once you retrieve the reference to an element in the DOM, you can modify any of the element's properties.

### Modify content

```javascript
element.textContent = 'Hello 🌏';
```

{% hint style="warning" %}
HTML content can be controlled using `element.innerHTML` attribute but this approach is dangerous as it can lead to **XSS *****(Cross-Site Scripting)***** vulnerabilities**.

In addition to the security issues, updating the `innerHTML` forces the browser to parse the HTML then update the DOM content. This can have bad performance results.
{% endhint %}

### Modify properties

```javascript
/* Toggle `disabled` state. */
button.disabled = !button.disabled;

link.src = `https://wishtack.io`;
```

### Modify the structure

#### Create a DOM element

```javascript
const child = document.createElement('div');
```

#### Append an element

```javascript
parent.appendChild(child);
```

#### Remove an element

```javascript
parent.removeChild(child);
```

### CSSOM *(CSS Object Model)*

```javascript
/* Update some CSS style. */
element.style.backgroundColor = 'red';

/* Added a CSS class to an element. */
element.classList.add('blog-post-content');

/* Toggle a CSS class. */
element.classList.toggle('important');
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://web-dev-guide.wishtack.io/dom/element-modification.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.