lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webIntroJsChapter4Title

webIntroJsChapter1Title

webIntroJsChapter2Title

webIntroJsChapter3Title

# Creating HTML Elements and Setting Attributes

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

To accomplish this, we use methods like `document.createElement()` and `Element.setAttribute()`.

## document.createElement("button")

The `document.createElement` method is used to create new HTML elements.

For example, by passing `"button"` as a string within the parentheses, a corresponding HTML element is created.

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

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

<br />

## Element.setAttribute(name, value)

The `Element.setAttribute` method is used to set a new attribute or change the value of an existing attribute for an HTML element.

The target of setAttribute is not the document, but a single HTML element.

The first argument to `setAttribute` is the attribute's name, and the second argument is the attribute's value.

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

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

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

The document.createElement('Button') method creates a 'Button' element. This allows you to dynamically add buttons using JavaScript.

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

Creating and Setting Attributes of HTML Elements

Creating HTML Elements and Setting Attributes

document.createElement("button")

Element.setAttribute(name, value)

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

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