순수하게 태그 CRUD 메서드를 외워보겠다.
로그인때 에러메세지 넣고 싶은데 제이쿼리 조작하다가 막혔다.
꼭 제이쿼리 스크립트 태그를 잊지 말자.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>//1. 원하는 태그 생성하기
var $divTest = $('<div>Hello</div>');
//2. 태그 붙이기
$('#jinvicky').append($divTest); //부모에게 자식을
$divTest.appendTo($('#jinvicky')); //자식에게 부모를
//3. 특정 태그 지우기
$("#jinvicky").remove();
//참조한 태그를 통으로 지운다.
//잘못 써서 에러메세지 지운다고 하고 인풋 태그 날렸었다.
$("#jinvicky").detach();
//detach()는 잠시 제거다. 변수에 넣었다가 다시 붙이기 가능.
//4. 태그 안의 내용 지우기. innerHTML을 ""로 만드는 것과 같다.
$('#jinvicky').empty();
//5. 태그를 복사하기
$('#jinvicky').clone();태그 생성 저렇게 하는 지는 몰랐다.
참고 자료
https://www.zerocho.com/category/jQuery/post/57ae9d8d5abdd01500840008
아래는 그냥 내가 해 본 코드다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="jinvicky">진이테스트</div>
<script>
$(document).ready(function () {
var $divTest = $("<div>Hello2</div>");
//2. 태그 붙이기
$("#jinvicky").append($divTest); //부모에게 자식을
// $divTest.appendTo($("#jinvicky")); //자식에게 부모를
//3. 특정 태그 지우기
// $("#jinvicky").remove();
// $("#jinvicky").detach();
// $("#jinvicky").empty(); //jinvicky와 자식 모두 지운다.
const $cloned = $("#jinvicky").clone(); //클론의 경우 옆처럼 변수에 담아서 써보았다.
$cloned.appendTo($("#jinvicky")); //복붙해서 jinvicky와 내부 자식 Hello가 두 개가 되었다.
});
</script>
</body>
</html>
일단 쓰고 본다