반응형
DIV 생성, list 생성 버튼을 클릭하면 새로운 객체들이 생성된다.
list안에 입력값을 넣고 list 생성을 누르면 input의 값이 입력된 li가 출력된다.
다시 li값을 누르면 li가 삭제된다!
textbox에 글을 작성하고 list생성을 클릭해보자.
프로그램으로 돌리면 되는데 블로그에서는 DIV생성이 안된다 ㅎㅎ ㅜㅜ
<HTML>
객체를동적으로생성, 삽입, 삭제하는예제
DOM 트리에동적으로객체를삽입할수있습니다..
DIV 생성 list 생성
<코드>
<!DOCTYPE html>
<html>
<head>
<title>문서의동적구성</title>
<script>
function deleteSong(idx) {
songArr.splice(idx, 1);
showList();
}
function createDIV(){
var obj= document.getElementById("parent");
var newDIV= document.createElement("div");
newDIV.innerHTML= "새로생성된DIV입니다.";
newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor= "yellow";
newDIV.onclick= function() {
var p = this.parentElement; // 부모HTML 태그요소
p.removeChild(this); // 자신을부모로부터제거
};
obj.appendChild(newDIV);}
function createList(){
const input = document.getElementById("input").value;
var newli = document.createElement("li")
newli.setAttribute("id", "myList");
newli.innerHTML = input;
newli.onclick= function() {
var ul = this.parentElement;
ul.removeChild(this);
};
document.getElementById("itemlist").appendChild(newli);
}
</script>
</head>
<body id="parent">
<h3>객체를동적으로생성, 삽입, 삭제하는예제</h3>
<hr>
<p>DOM 트리에동적으로객체를삽입할수있습니다..</p>
<a href="javascript:createDIV()">DIV 생성</a>
<a href="javascript:createList()">list 생성</a>
<p><p>
<input type="text" id="input" placeholder="추가할 항목을 작성하세요.">
<ul id="itemlist">
</ul>
</body>
</html>
반응형
'Language > HTML, JS' 카테고리의 다른 글
| [HTML, JS] 두개의 주사위 눈의 합 경우의 수 (0) | 2022.10.20 |
|---|---|
| [HTML, JS] localStorage (로컬스토리지) 활용 예제 (0) | 2022.10.19 |
| [HTML, JS] innerHTML 활용 (2) | 2022.10.18 |
반응형
DIV 생성, list 생성 버튼을 클릭하면 새로운 객체들이 생성된다.
list안에 입력값을 넣고 list 생성을 누르면 input의 값이 입력된 li가 출력된다.
다시 li값을 누르면 li가 삭제된다!
textbox에 글을 작성하고 list생성을 클릭해보자.
프로그램으로 돌리면 되는데 블로그에서는 DIV생성이 안된다 ㅎㅎ ㅜㅜ
<HTML>
객체를동적으로생성, 삽입, 삭제하는예제
DOM 트리에동적으로객체를삽입할수있습니다..
DIV 생성 list 생성
<코드>
<!DOCTYPE html>
<html>
<head>
<title>문서의동적구성</title>
<script>
function deleteSong(idx) {
songArr.splice(idx, 1);
showList();
}
function createDIV(){
var obj= document.getElementById("parent");
var newDIV= document.createElement("div");
newDIV.innerHTML= "새로생성된DIV입니다.";
newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor= "yellow";
newDIV.onclick= function() {
var p = this.parentElement; // 부모HTML 태그요소
p.removeChild(this); // 자신을부모로부터제거
};
obj.appendChild(newDIV);}
function createList(){
const input = document.getElementById("input").value;
var newli = document.createElement("li")
newli.setAttribute("id", "myList");
newli.innerHTML = input;
newli.onclick= function() {
var ul = this.parentElement;
ul.removeChild(this);
};
document.getElementById("itemlist").appendChild(newli);
}
</script>
</head>
<body id="parent">
<h3>객체를동적으로생성, 삽입, 삭제하는예제</h3>
<hr>
<p>DOM 트리에동적으로객체를삽입할수있습니다..</p>
<a href="javascript:createDIV()">DIV 생성</a>
<a href="javascript:createList()">list 생성</a>
<p><p>
<input type="text" id="input" placeholder="추가할 항목을 작성하세요.">
<ul id="itemlist">
</ul>
</body>
</html>
반응형
'Language > HTML, JS' 카테고리의 다른 글
| [HTML, JS] 두개의 주사위 눈의 합 경우의 수 (0) | 2022.10.20 |
|---|---|
| [HTML, JS] localStorage (로컬스토리지) 활용 예제 (0) | 2022.10.19 |
| [HTML, JS] innerHTML 활용 (2) | 2022.10.18 |
