# Adding and Removing Elements

here are some methods, properties, and attributes you can use to add or remove elements in the DOM:

1. createElement(): This method creates a new HTML element specified by the tagName argument. It returns a new Element object, which can then be appended to the DOM.

Example:

```javascript
javascriptCopy codeconst newDiv = document.createElement('div');
document.body.appendChild(newDiv);
```

2. appendChild(): This method appends a node as the last child of a parent node.

Example:

```javascript
javascriptCopy codeconst newDiv = document.createElement('div');
document.body.appendChild(newDiv);

const newPara = document.createElement('p');
newDiv.appendChild(newPara);
```

3. removeChild(): This method removes a child node from its parent node.

Example:

```javascript
javascriptCopy codeconst parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);
```

4. replaceChild(): This method replaces a child node with a new node.

Example:

```javascript
javascriptCopy codeconst parent = document.getElementById('parent');
const oldChild = document.getElementById('oldChild');
const newChild = document.createElement('div');
parent.replaceChild(newChild, oldChild);
```

5. insertBefore(): This method inserts a new node before a specified reference node as a child of a specified parent node.

Example:

```javascript
javascriptCopy codeconst parent = document.getElementById('parent');
const newChild = document.createElement('div');
const refChild = document.getElementById('refChild');
parent.insertBefore(newChild, refChild);
```

6. innerHTML: This property sets or returns the HTML content of an element.

Example:

```css
cssCopy codeconst div = document.getElementById('div');
div.innerHTML = '<p>Hello world!</p>';
```

7. outerHTML: This property sets or returns the HTML content of an element, including the element itself.

Example:

```css
cssCopy codeconst div = document.getElementById('div');
div.outerHTML = '<p>Hello world!</p>';
```

8. cloneNode(): This method creates a copy of a node, including all of its attributes and descendants.

Example:

```javascript
javascriptCopy codeconst oldNode = document.getElementById('oldNode');
const newNode = oldNode.cloneNode(true);
document.body.appendChild(newNode);
```

9. attributes: This property returns a live collection of attributes of an element.

Example:

```javascript
javascriptCopy codeconst link = document.getElementById('link');
const attr = link.attributes;
console.log(attr);
```

10. hasAttribute(): This method returns true if an element has a specified attribute, otherwise it returns false.

Example:

```javascript
javascriptCopy codeconst link = document.getElementById('link');
if (link.hasAttribute('href')) {
  console.log(link.getAttribute('href'));
}
```

11. setAttribute(): This method sets the value of an attribute on an element.

Example:

```javascript
javascriptCopy codeconst link = document.getElementById('link');
link.setAttribute('href', 'https://example.com');
```

12. `removeAttribute()`: This method removes an attribute from an element. The attribute is specified as a string parameter.

Example:

```javascript
javascriptCopy codeconst myElement = document.querySelector('#my-element');
myElement.removeAttribute('disabled');
```

This example removes the `disabled` attribute from the `myElement` element.


---

# 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://dhrubo.gitbook.io/programming-with-js/dom/adding-and-removing-elements.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.