> For the complete documentation index, see [llms.txt](https://dhrubo.gitbook.io/programming-with-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dhrubo.gitbook.io/programming-with-js/dom/adding-and-removing-elements.md).

# 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.