반응형
예시
다음과 같은 div 태그가 있습니다.
<style>
.borderStyle {
border:1px solid;
margin:5px;
}
</style>
<div id="parentDiv" class="borderStyle"> parent
<div id="childDiv" class="borderStyle"> child : hello </div>
</div>
child 요소 아래에 새로운 div를 추가하여 메시지를 입력하려면 어떻게 해야 할까요?
물론, html 태그에 <div>를 정의하여 추가할 수 있지만,
정적인 페이지가 아닌 동적인 페이지를 표현하고자 할 때에는 자바스크립트를 사용하여야 합니다.
자바스크립트로 요소 생성하기
- 구문
- createElement(태그이름) : HTML 문서에서 지정한 태그의 요소 생성
- 예시) document.createElement("div") : 페이지에 div 태그 생성
- 단, 요소는 생성되었으나 어디에 위치할지를 지정하지 않았기 때문에 문서 내에서 보이지 않음
document.createElement("HTML태그명");
- 예시 코드
<script>
window.onload = function() {
const newElement = document.createElement("div");
}
</script>
<style>
.borderStyle {
border:1px solid;
margin:5px;
}
</style>
<div id="parentDiv" class="borderStyle"> parent
<div id="childDiv" class="borderStyle"> child : hello </div>
</div>
자바스크립트로 요소 추가하기
- 구문
- 요소 : 부모 노드의 요소명
- appendChild(자식요소) : 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 추가
- 즉, 새로운 요소를 자식 요소로 추가하는 것
요소.appendChild(자식요소);
- 예시 코드
<script>
window.onload = function() {
// create element
const newElement = document.createElement("div");
// append child element, parent : body
document.body.appendChild(newElement);
}
</script>
<style>
.borderStyle {
border:1px solid;
margin:5px;
}
</style>
<div id="parentDiv" class="borderStyle"> parent
<div id="childDiv" class="borderStyle"> child : hello </div>
</div>
추가된 것이 보이지는 않지만 개발자 도구로 확인하면 요소가 추가되있는 것을 확인할 수 있습니다.
자바스크립트로 자식 요소 값 설정하기
- 구문
- 자식요소.메서드 혹은 자식요소.속성 : 자식요소의 메서드를 수행하거나 속성 값 설정
- 예시) 자식 요소에 텍스트 입력 : 자식요소.innerHTML = "내용"
<!-- 자식요소의 메서드 수행 -->
자식요소.메서드
<!-- 자식요소의 속성 값 설정 -->
자식요소.속성 = 값;
- 예시 코드
<script>
window.onload = function() {
document.body.appendChild(newElement);
// create element
const newElement = document.createElement("div");
// input text
newElement.innerHTML = "add body child : world!"
// append child element, parent : body
document.body.appendChild(newElement);
}
</script>
<style>
.borderStyle {
border:1px solid;
margin:5px;
}
</style>
<div id="parentDiv" class="borderStyle"> parent
<div id="childDiv" class="borderStyle"> child : hello </div>
</div>
부모 요소 활용하기
부모 요소를 지정해 'parent' div 아래에 위치해봅시다.
- 예시 코드
<script>
window.onload = function() {
// 문서 본문에 새 요소 추가
const newElement = document.createElement("div");
newElement.innerHTML = "add body child : world!"
document.body.appendChild(newElement);
// parent 요소에 새 요소 추가
const parent = document.getElementById("parentDiv");
const addChildDiv = document.createElement("div");
addChildDiv.innerHTML = "add child : world!"
parent.appendChild(addChildDiv);
}
</script>
<style>
.borderStyle {
border:1px solid;
margin:5px;
}
</style>
<div id="parentDiv" class="borderStyle"> parent
<div id="childDiv" class="borderStyle"> child : hello </div>
</div>
자식 요소 css 스타일 적용하기
새로 추가한 자식 요소에게도 테두리를 적용해봅시다.
- 구문
- 요소.className : 특정 요소의 클래스 속성 값을 가져오거나 설정
- 요소.style.속성 : 특정 요소의 CSS 스타일 설정
<!-- CSS 클래스 설정 -->
요소.className = CSS클래스명;
<!-- 다른 요소의 클래스 속성 값 가져오기 -->
let 변수 = 다른요소.className;
요소.className = 변수;
<!-- CSS 속성 설정 -->
요소.style.속성 = 속성값;
- 예시 코드
<script>
window.onload = function() {
// 문서 본문에 새 요소 추가
const newElement = document.createElement("div");
newElement.innerHTML = "add body child : world!"
document.body.appendChild(newElement);
// parent 요소에 새 요소 추가
const parent = document.getElementById("parentDiv");
const addChildDiv = document.createElement("div");
addChildDiv.classList = parent.className;
/* 또는 addChildDiv.className = "borderStyle" */
/* 또는
addChildDiv.style.border = "1px solid";
addChildDiv.style.margin = "5px";
*/
addChildDiv.innerHTML = "add child : world!"
parent.appendChild(addChildDiv);
}
</script>
<style>
.borderStyle {
border:1px solid;
margin:5px;
}
</style>
<div id="parentDiv" class="borderStyle"> parent
<div id="childDiv" class="borderStyle"> child : hello </div>
</div>
참고
반응형