db
Document Object Model
구조화된 문서를 뜻한다
HTML DOM은 다음 이미지와 같은 형식이다
parent와 child를 갖는 트리구조이며, js의 getAttribute나 hasAttribute, jquery의 find 등으로 태그(혹은 id, name)를 찾아 지정하고
삭제나 필요한 html을 추가하는 등의 원하는 동작을 js, jquery 등으로 할 수 있다
<!-- 테스트해보지 않고 임의로 작성. 추후 테스트 -->
<script>
var targetTr = document.getElementById("insertTr"); // insertTr id를 가진 tr 태그를 가져온다
var select = document.creatElement("select"); // <select> ~~~~~~~ </select>를 생성
$(targetTr).empty(); // jquery로 targetTr의 내용을 비워버린다. #insertTr selector를 이용해서 비워도 된다
var inHtml = "<th>교육내용</th>";
targetTr.appendChild(inHtml); // inHtml의 내용을 자식으로 붙인다. 그 결과물은 아래 주석모양. innerHTML을 사용하면 다른 결과가 있다
/*
<tr id="insertTr"> empty로 비워버렸기에 내용이 비어있다
<th>교육내용</th>
</tr>
*/
select.value = "초등교육"
select.innerText = "초등교육"
targetTr.appendChild(select); // insertTr에 생성된 select를 자식으로 붙인다
select.value = "중등교육"
select.innerText = "중등교육"
targetTr.appendChild(select);
select.value = "고등교육"
select.innerText = "고등교육"
targetTr.appendChild(select);
</script>
<table>
<tr id="insertTr"> <!-- 편의를 위해 예시를 하드코딩한다 -->
<th>교육대상</th>
<td>중학생</td>
</tr>
</table>
본문에 첨부한 이미지처럼 DOM을 구성하고, parent, child, 혹은 직접 element에 접근하여 사용하고, text로 DOM을 구성해서
<table> <th></th> <td></td> <th></th> <td></td> </table> 등을 문자열로 직접 생성하고, 내부 값을 함수(만들거나, 존재하는)나 EL태그, 혹은 text를 하드코딩하거나 하여 구성하고 append나 innerHTML 등의 메서드로 추가하여 원하는 구조를 동적으로 추가시킬 수 있다
