8. 엘리먼트 등록/수정/삭제
페이지 정보
작성자 관리자 댓글 0건 조회 506회 작성일 22-01-09 18:45본문
8. 엘리먼트 등록/수정/삭제
자바스크립트에서 엘리먼트(요소, 노드)를 생성하기위한 명령
document.createElement("태그명");
자식을 등록 :부모객체(부모요소).appendChild(자식요소);
자식을 제거 :부모객체(부모요소).removeChild(노드);
제이쿼리에서는 $("태그명")
자식추가 : $(부모객체).append(child);
자식제거 : $(부모객체).children().remove();
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>
댓글목록
등록된 댓글이 없습니다.