1. 문제
index.js에 아래의 내용을 구현한다.
- p 태그를 생성한다. (hint: createElement)
- 해당 요소에 dom 이라는 class 이름을 준다. (hint: className)
- 해당 요소에 "DOM" 이라는 텍스트를 넣는다. (hint: innerHTML)
- 그것을 h1요소 내부에 추가한다. (hint: appendChild)
- 주어진 HTML 코드
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <h1 class="h1-title"> <span>난 span</span> 여기만 바꾸고 싶어 </h1> <script src="index.js"></script> </body> </html>
- 주어진 CSS 코드
.title { color: red; } .dom { color: blue; }
2. 내가 쓴 코드
function addP() {
let charP = document.createElement('p');
let heading1 = document.getElementsByTagName('h1')[0];
charP.className = 'dom';
charP.innerHTML = "DOM";
heading1.appendChild(charP);
}
addP();3. 코드 설명
-
새로 함수를 정의한다.
-
함수의 내부에는 p태그를 생성하는 document 객체의
createElement메서드를 사용하고charP라는 변수에 할당해준다. -
또한 HTML 파일에서 인덱스 0 번째로 오는
h1태그를 가져오는 document 객체의getElementsByTagName메서드를 사용하고heading이라는 변수에 할당해준다. -
변수
chaP에 클래스 이름을 주는 document 객체의className에 'dom'이라는 클래스 이름을 준다. -
그리고 4번 요소에 document 객체의
innerHTML메서드를 사용하여 "DOM" 이라는 텍스트를 넣어준다. -
3번 과정에서 가져온 'h1' 요소 내부에
charP를 document 객체의appendChild메서드를 사용하여 내용을 추가해준다.
charP.className = 'dom';에서 클래스 이름을 주는 과정에서 따옴표를 빠뜨려서 답이 나오지 않았다. HTML 상에서 우리가 클래스 이름을 줄 때에도 따옴표를 넣는 것처럼 객체에서 클래스 이름을 줄 때에도 따옴표를 사용하도록 한다. 이런 사소하게 헷갈리는 것들이 발목을 잡을 수 있다.
