Web/JavaScript
DOM 객체 동적 생성
H_eh
2022. 7. 6. 16:13
DOM 객체 동적 생성: document.createElement("태그이름")
- 클릭 시 div 생성 과 삭제
function di(){
var n = document.getElementById("parent");
var m = document.createElement("div");
m.innerHTML = "new div";
m.setAttribute("id", "new");
m.style.backgroundColor = "gold";
m.style.width = "300px"; m.style.height = "50px";
m.style.border = "1px solid #000";
m.onclick = function(){
var p = this.parentElement; //부모 태그 요소
p.removeChild(this);
console.log("바디클릭");
}
n.appendChild(m);
}
<body id = "parent">
<p>
Lorem ipsum dolor sit amet vitae et modi. Voluptates, optio accusantium?
<a href="javascript:di()">생성노드</a>
</p>
</body>
- 저장버튼 클릭하면 입력받은 값이 들어가게 생성
이름:<input type="text" name="aa"><br>
전화번호:<input type="tel" name="tel"><br>
<input type="submit" value="저장" onclick="addr()">
<input type="submit" value="리셋" onclick="re()">
<ul id="addr"> </ul>
function addr(){
result = document.getElementById("addr");
add = document.getElementsByName("aa")[0].value +', '+
document.getElementsByName("tel")[0].value;
item = document.createElement("li");
node = document.createTextNode(add);
result.appendChild(item);
item.appendChild(node);
}
function re(){
document.getElementById("addr").innerHTML = " ";
}
- “답보기” 버튼을 클릭하면 서버, 짜장면이 출력. <p>객체를 동적으로 생성하여 삽입해라
<script>
function whatC(chk){
var que1 = document.getElementById("q0706_A");
var que2 = document.getElementById("q0706_B");
var m = document.createElement("p");
m.setAttribute("id", "new");
switch (chk) {
case 1:
m.innerHTML ="서버";
que1.appendChild(m);
break;
case 2:
m.innerHTML ="짜장면";
que2.appendChild(m);
break;
default:
break;
}
m.onclick = function(){
var p = this.parentElement;
p.removeChild(this);
}
}
</script>
<!-- 0706 문제 3 -->
<div id="q0706_A">
<h3>Q. 컴퓨터 분야 뭐가 관심있니?</h3>
<p id="an1">
<button><a href="javascript:whatC(1)">답보기</a> </button>
</p>
</div>
<hr>
<div id="q0706_B">
<h3>Q. 뭐 먹고 싶니?</h3>
<p id="an2">
<button><a href="javascript:whatC(2)">답보기</a> </button>
</p>
</div>
728x90
728x90