본문 바로가기
대학교/2.웹프로그래밍

[명품 웹 프로그래밍] 8장 연습문제

by Jcoder 2017. 6. 3.

8장실습문제 1, 3, 5, 10번을 제출하기 바랍니다.


10.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 객체 동적 삽입</title>
<script src ="JS_CSS/10.js">
</script>
</head>
<body>
<h3>정답의 동적 삽입</h3>
<hr>
<div>
<p>Q. 거울아 거울아 세상에서 누가 제일 예쁘니?</p>
<button onclick="addAnswer(this, '백설공주')"> 답보기 </button>
</div>
<div>
<p>Q. 죽느냐 사느냐 어떤 것이 문제인가?</p>
<button onclick="addAnswer(this, '둘다')"> 답보기 </button>
</div>
</body>
</html>


10.js
function addAnswer(obj, text)
{
var object = obj.parentElement;
var newP = document.createElement("p"); //p태그 생성
if(obj != object.lastElementChild) //마지막 자식이 아니면 리턴
return;
else
{
newP.innerHTML = text; //마지막이면 text를 생성
object.appendChild(newP);
}
newP.onclick = function() //text를 눌렀을 때 제거
{
var p = this.parentElement; // 부모 HTML 태그 요소
p.removeChild(this); // 자신을 부모로부터 제거
};