<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
js
▼아래는 다양한 방식 예시
const element = document.getElementById('app');
element.innerHTML = '<p>hello, world!</p>';const element = document.getElementById('app');
const paragraph = document.createElement('p'); //요소를 만든다
paragraph.innerText = 'Hello, world!';
element.appendChild(paragraph); //마지막 자식으로 넣기const element = document.getElementById('app');
const paragraph = document.createElement('p');
const text = document.createTextNode('Hello, world!'); // 선택한 요소에 텍스트를 추가한다.
paragraph.appendChild(text); //<p></p>안에 텍스트로 넣어짐
element.appendChild(paragraph);
간단하게 줄이는 방법 예제
▼
▼
▼
▼
.
.
.
// 추상화한 함수
function createElement(tagName, ...children) {
const element = document.createElement(tagName);
children.forEach((child) => {
element.appendChild(child);
});
return element;
}
const paragraph1 = createElement(
'p', // 1번째는 tagName, 나머지는 뒤에 ...children배열로 들어감
document.createTextNode('Hello'),
document.createTextNode('Hello!!'),
);
const paragraph2 = createElement(
'p',
document.createTextNode('Hi'),
);
const root = createElement(
'div',
paragraph1,
paragraph2,
);
const container = document.getElementById('app');
container.appendChild(root);▼
function createElement(tagName, ...children) {
const element = document.createElement(tagName);
children.forEach((child) => {
element.appendChild(child);
});
return element;
}
document.getElementById('app').appendChild(
createElement(
'div',
createElement(
'p',
document.createTextNode('Hello'),
document.createTextNode('Hello!!'),
),
createElement(
'p',
document.createTextNode('Hi'),
),
),
);▼
function createElement(tagName, ...children) {
const element = document.createElement(tagName);
children.forEach((child) => {
element.appendChild(child);
});
return element;
}
document.getElementById('app').appendChild(
createElement(
'div',
createElement(
'p',
...[1, 2, 3].map((i) => (
document.createTextNode(`Hello! ${i} | `)
)),
),
createElement(
'p',
document.createTextNode('Hi'),
),
),
);
'CodeSoom- React 13기' 카테고리의 다른 글
| [코드숨] 리액트 13기 -1강/과제 2 - 간단한 사칙 연산 계산기 구현 과제 풀이 (0) | 2022.10.19 |
|---|---|
| [코드숨] 리액트 13기 -1강/과제 1 - let을 제거해보자 과제 풀이 (0) | 2022.10.19 |
| [코드숨] 리액트 13기 - git hub 참고(fork, add) (0) | 2022.10.12 |
| [코드숨] 리액트 13기 -1강/JSX(Babel) (0) | 2022.10.11 |
| [코드숨] 리액트 13기 -1강/개발환경구축 (0) | 2022.10.10 |
