lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webIntroJsChapter4Title

webIntroJsChapter1Title

webIntroJsChapter2Title

webIntroJsChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>Create Element 예시</title>
  </head>
  <body>
    <div id="content">
      <p>빈칸을 입력하고 버튼을 클릭해 보세요</p>
    </div>
    <button id="addNewButton" onclick="addNewButton()">새로운 버튼 추가하기</button>
  </body>
</html>

function addNewButton() {
  const newButton = document.createElement('');
  newButton.textContent = '클릭해보세요!';

  newButton.setAttribute('id', 'specialButton');
  newButton.setAttribute('class', 'bigButton');
  newButton.textContent = '새로운 버튼';

  document.getElementById('content').appendChild(newButton);
}

const newButton = document.createElement('Button');

# HTML 요소 생성과 속성 설정

웹 페이지에 새로운 요소를 추가하거나 기존 요소의 속성을 설정하려면 어떻게 해야 할까요?

이를 위한 도구로 `document.createElement()`와 `Element.setAttribute()` 메서드가 있습니다.

## document.createElement("Button")

`document`.createElement 메서드는 새로운 HTML 요소를 생성합니다.

아래 예시의 `"Button"`처럼 괄호 안에 요소의 이름을 문자열로 전달하면 그에 해당하는 요소가 만들어집니다.

```javascript title="HTML 요소 생성하기"
const newButton = document.createElement('Button');
newButton.textContent = '클릭해보세요!';

document.body.appendChild(newButton); // 웹 페이지에 버튼 추가
```

<br />

## Element.setAttribute(name, value)

`Element`.setAttribute 메서드는 요소에 새로운 속성을 설정하거나 기존 속성의 값을 변경합니다.

setAttribute가 적용되는 대상은 document가 아닌, 하나의 HTML 요소입니다.

setAttribute의 첫 번째 인자로 속성의 이름(Name)을, 두 번째 인자로 속성의 값(Value)을 전달합니다.

```javascript title="HTML 요소에 속성 설정하기"
const newButton = document.createElement('Button');

newButton.setAttribute('id', 'specialButton'); // id 속성 설정
newButton.setAttribute('class', 'bigButton'); // class 속성 설정

// 버튼은 id="specialButton"과 class="bigButton" 속성을 가짐
```