하이브리드앱

본문 바로가기

사이트 내 전체검색


8. 엘리먼트 등록/수정/삭제

페이지 정보

작성자 관리자 댓글 0건 조회 1,135회 작성일 22-01-09 18:45

본문

자바스크립트에서 엘리먼트(요소, 노드)를 생성하기위한 명령


document.createElement("태그명");


자식을 등록 :부모객체(부모요소).appendChild(자식요소);

자식을 제거 :부모객체(부모요소).removeChild(노드);

제이쿼리에서는 $("태그명")

자식추가 : $(부모객체).append(child);

자식제거 : $(부모객체).children().remove();


자바스크립트로 엘리먼트 관리하기

실습 : jquery06.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 연습</title>
<script type="text/javascript"> 
window.onload = function(){
var div1 = document.getElementById("div1");
var divChild = document.createElement("div");
divChild.innerHTML="자식";
document.getElementById("addBtn").onclick=function(){
div1.appendChild(divChild);
}
document.getElementById("removeBtn").onclick=function(){
div1.removeChild(div1.childNodes[0]);
}
document.getElementById("changeBtn").onclick=function(){
div1.childNodes[0].innerHTML="변경"
}
}
</script>
<style>
</style>
</head>
<body>
<div id="div1"></div>
<br/><br/>
<input type="button" id="addBtn" value="추가"/>
<input type="button" id="removeBtn" value="제거"/>
<input type="button" id="changeBtn" value="변경"/>
</body>
</html>


10.PNG


11.PNG


jQuery 로 엘리먼트 관리하기


실습 : jquery06.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> 

var child = $("<div></div>").text("자식");

$(document).ready(function() {

$('#addBtn').click(function(){

$('#div1').append(child);

})

$('#removeBtn').click(function(){

$('#div1').children().remove();

});

$('#changeBtn').click(function(){

//$('#div1').children().text("변경");

$('#div1').after("<div>형제</div>");

//$('#div1').before("<div>형제</div>");

});

});

</script>

<style>

</style>

</head>

<body>

<div id="div1"></div>

<br/><br/>

<input type="button" id="addBtn" value="추가"/>

<input type="button" id="removeBtn" value="제거"/>

<input type="button" id="changeBtn" value="변경"/>

</body>

</html>



12.PNG


댓글목록

등록된 댓글이 없습니다.



개인정보취급방침 서비스이용약관
Copyright © www.leelab.co.kr All rights reserved.
상단으로
TEL. 063-469-4551 FAX. 063-469-4560
전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과
PC 버전으로 보기