30번 개발일지(대구AI스쿨 65일차)

학습한 내용

jQuery 3일차. Form 태그 선택자, jQuery 이벤트 함수, DOM에 대해 학습했다.

학습소감

1️⃣🟢 append(), prepend() 함수와 after(), before() 함수는 비슷해보이지만 차이점이 있다.

append(), prepend() 함수를 사용한 코드

	<div id="a1">
		<p>p 태그</p>		
	</div>
	<button onclick="append1()">HTML 코드를 뒤에 추가</button>
	<button onclick="append2()">HTML 객체를 뒤에 추가</button>
	<button onclick="prepend1()">HTML 코드를 앞에 추가</button>
	<button onclick="prepend2()">HTML 객체를 앞에 추가</button>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		function append1() {
			$("#a1").append("<p>새롭게 추가한 p1</p>");
		}
		function append2() {
			var p = $("<p>");
			p.text("새롭게 추가한 p2");
			$("#a1").append(p);
		}
		function prepend1() {
			$("#a1").prepend("<p>새롭게 추가한 p3</p>");
		}
		function prepend2() {
			var p = $("<p>");
			p.text("새롭게 추가한 p4");
			$("#a1").prepend(p);
		}
	</script>

after(), before() 함수를 사용한 코드

	<div id="a1">
		<p>p 태그</p>		
	</div>
	<button onclick="after1()">HTML 코드를 뒤에 추가</button>
	<button onclick="after2()">HTML 객체를 뒤에 추가</button>
	<button onclick="before1()">HTML 코드를 앞에 추가</button>
	<button onclick="before2()">HTML 객체를 앞에 추가</button>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		function after1() {
			$("#a1").after("<p>새롭게 추가한 p태그 1</p>")
		}
		function after2() {
			var p = $("<p>");
			p.text("새롭게 추가한 p태그 2");
			$("#a1").after(p);
		}
		function before1() {
			$("#a1").before("<p>새롭게 추가한 p태그 3</p>")
		}
		function before2() {
			var p = $("<p>");
			p.text("새롭게 추가한 p태그 4");
			$("#a1").before(p);
		}
	</script>

왼쪽이 after(), before() 함수고 오른쪽이 append(), prepend() 함수다.

2️⃣🟢 remove()와 empty()는 비슷하지만 차이점이 있다.
remove() 함수는 타겟이 되는 태그를 삭제하고 만약 내부 태그가 있다면 내부 태그까지 삭제하는데 empty() 함수는 타겟이 되는 태그는 남겨두고 내부 태그만 삭제한다.

이 코드에서는 a1이 empty()함수의 타겟이 되어 a1 아이디값을 가진 div 안의 태그들이 제거된다.

	<div id ="a1">
		<p>p 태그</p>
	</div>
	<button onclick="empty_a1()">a1 내부의 모든 태그 제거</button>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		function empty_a1() {
			$("#a1").empty();
		}
	</script>

이 코드에서는 a1이 remove()함수의 타겟이 되어 a1 아이디값을 가진 div와 내부 태그까지 제거된다.

	<div id ="a1">
		<p>p 태그</p>
	</div>
	<button onclick="remove_a1()">a1 제거</button>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		function remove_a1() {
			$("#a1").remove();
		}
	</script>