- 함수 호출
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>hello</p>
<p>world</p>
<p>I can do it</p>
<p>Never change my mind</p>
<button type="button" onclick="listfun()">nodelist</button>
<script type="text/javascript">
function listfunc(){
let nodelist = document.getElementByTagName("p");
alert(nodelist.length);
nodelist[2].innerHTML = "나는 문제없어";
for(var i=0; i<nodelist.length; i++){
nodelist[i].style.backgroundColor='#ffff00';
}
}
</script>
</body>
</html>
- 테이블 생성 (append)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>단가 x 수량 알람표</h3>
<table border="1" id="mytable">
<tr>
<th>갯수</th><th>제품 A</th><th>제품 B</th><th>제품 C</th>
</tr>
</table>
<script type="text/javascript">
let dataA = [24,34,52,41,37];
let dataB = [1,5,6,8,9,23];
let dataC = [163,463,74,88,55,44];
let table = document.getElementById("mytable");
let tr = document.createElement("tr");
let th = document.createElement("th");
th.appendChild(document.createTextNode((1+i)+" "));
let td1 = document.createElement("td");
td1.appendChild(document.createTextNode(dataA[i] + " " ));
let td2 = document.createElement("td");
td2.appendChild(document.createTextNode(dataB[i]+ " " ));
let td3 = document.createElement("td");
td3.appendChild(document.createTextNode(dataC[i] + " " ));
tr.appendChild(th);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);
</script>
</body>
</html>