lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webIntroJsChapter4Title

webIntroJsChapter1Title

webIntroJsChapter2Title

webIntroJsChapter3Title

# Creating and Setting Attributes of HTML Elements

How can you add new elements to a web page or set the attributes of existing elements?

For this purpose, you can use the `document.createElement()` and `Element.setAttribute()` methods.

## document.createElement("Button")

The `document.createElement` method creates a new HTML element.

By passing the element name as a string within the parentheses, like `"Button"` in the example below, the corresponding element is created.

```javascript title="Creating an HTML Element"
const newButton = document.createElement('Button');
newButton.textContent = 'Click me!';

document.body.appendChild(newButton); // Adding the button to the web page
```

<br />

## Element.setAttribute(name, value)

The `Element.setAttribute` method sets a new attribute or changes the value of an existing attribute for an element.

The target for `setAttribute` is an individual HTML element, not the document.

Pass the attribute name (Name) as the first argument, and the attribute value (Value) as the second argument to `setAttribute`.

```javascript title="Setting Attributes for an HTML Element"
const newButton = document.createElement('Button');

newButton.setAttribute('id', 'specialButton'); // Setting the id attribute
newButton.setAttribute('class', 'bigButton'); // Setting the class attribute

// The button now has id="specialButton" and class="bigButton" attributes
```

The document.createElement('Button') method creates a 'Button' element. This allows for dynamically adding a button via JavaScript.

### The document.createElement('Button') method can create a new HTML button element.