참고자료
출처 https://pridiot.tistory.com/160
예시
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
// 태그(요소)를 만드는 방법
// 형식) createElement("태그이름");
// 형식) createTextNode("텍스트");
// 1. 태그(요소)를 만들어보자
let h1_element = document.createElement("h1"); // h1 태그를 만들겠다!
// 2. 텍스트 노드도 만들어보자
let text = document.createTextNode("방가방가 DOM");
// 3. 텍스트 노드를 h1 태그의 자식으로 추가
h1_element.appendChild(text);
// 4. h1 태그를 문서의 body 태그에 추가해주어야 함
document.body.appendChild(h1_element); // body 태그 안에 h1 태그(body의 자식)
}
</script>
</head>
<body>
</body>
</html>=============================실행=============================
예시2
이미지 태그
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
// 1. 이미지 태그를 만들어 보자
let img_element = document.createElement("img");
// 2. 속성이 필요한 경우에는 속성을 지정해주어야 함
img_element.src = "../images/pf.png";
img_element.width = "150";
img_element.height = "150";
// 3. DOM으로 만든 img 태그를 문서의 body에 추가
document.body.appendChild(img_element);
}
</script>
</head>
<body>
</body>
</html>=============================실행=============================
예시3
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
// 1. 이미지 태그를 만들어 보자
let img_element = document.createElement("img");
// 2. 속성을 추가해 주어야 함
// 속성을 지정해주는 함수가 있음
// ==> setAttribute("속성명", "value")
img_element.setAttribute("src", "../images/pf2.png");
img_element.setAttribute("width", "150");
img_element.setAttribute("height", "150");
// 3. DOM으로 만든 img태그를 문서의 body에 추가
document.body.appendChild(img_element);
}
</script>
</head>
<body>
</body>
</html>=============================실행=============================
