728x90
createElement
createTextNode
appendChild
getElementById
이 메소드들로 div태그에 태그와 텍스트 데이터를 넣어서 데이터를 뽑아냄
h3태그와 hi라는 str 데이터를 각각 변수로 따로 선언해서 만들어주고
div태그로 합치는 방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>prac - DOM</title>
<style>
.area{border:1px solid black; min-height:100px}
table{text-align: center;}
th{border: 1px solid black; width:100px;}
</style>
</head>
<body>
<h1>DOM(Document Object Model)</h1>
<h2>Node객체</h2>
<p>
노드 : 태그를 객체화 시켜 보는 것
노드 = 객체 = 태그
</p>
<h3>텍스트 노드가 있는 노드 생성</h3>
<button onclick="test1();">DOM - test1-1</button>
<div id="area1" class="area"></div>
<script>
function test1(){
// h3요소 노드를 만듦
var title = document.createElement('h3');
// 안녕 텍스트노드로 만들어진 데이터 생성함
var textNode = document.createTextNode('hi');
// 노드(요소)를 요소의 마지막 자식으로 추가
title.appendChild(textNode);
console.log(title) // <h3>hi</h3>
// div태그에 엘리먼트 넣기
document.getElementById('area1').appendChild(title);
}
</script>
<button onclick="test1again();">DOM - test1-2</button>
<div id="area1-1" class="area"></div>
<script>
function test1again(){
// h3요소 노드를 만듦
var makeNode = document.createElement('h4');
console.log(makeNode); // <h4>bye</h4>
// 안녕 텍스트노드로 만들어진 데이터 생성함
var textNode = document.createTextNode('bye');
console.log(textNode); // bye
// 노드(요소)를 요소의 마지막 자식으로 추가
makeNode.appendChild(textNode);
console.log(makeNode) // <h4>bye</h4>
// div태그에 엘리먼트 넣기
document.getElementById('area1-1').append(makeNode);
}
</script>
</body>
</html>
728x90
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
[1일1코딩][Java] 컬렉션 List 3rd - 반환타입을 if문과 연관지어 코딩 (0) | 2022.08.15 |
---|---|
[1일1코딩][Java] 컬렉션 List 2nd (0) | 2022.08.14 |
[1일1코딩][Java] Collection : List (0) | 2022.08.12 |
[1일1코딩][Java] 객체배열 practice 4th : 선언,할당,초기화(index,중괄호,for문) (0) | 2022.08.11 |
[1일1코딩][Web] boardDetailView 3rd (0) | 2022.08.10 |