choice blog

 jQuery에서 요소 추가하기

<button type="button">태그 추가</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$("button").click(function() {
	
	let txt = "<p>p 태그 추가함</p>";
	$("body").append(txt); // 버튼 밑에 추가됨
	
	let js = document.createElement("h2");
	js.innerHTML = "h2 태그 추가함";
	$("body").append(js); // jquery문법
	
//	let jqu = $("<p></p>").html("jquery p태그 추가"); // 정석
	let jqu = $("<p>").html("jquery p태그 추가"); 
	$("body").append(jqu);
});

</script>

설명

버튼을 클릭할 때마다 태그가 추가되는 코드이다.

append()

형식 : $(선택한 요소명).append(추가할 요소명)

요소를 추가해주는 함수이다.

선택한 요소의 끝에 요소를 추가해준다.

가장 쉬운방식은 text로 추가하는 방식이다. 하지만 명확하지가 않다.

"<p>p 태그 추가함</p>"

java script 추가

위 코드의 접근은 java script를 사용하였고 추가는 jquery문법을 사용하였다.

jquery추가

$("<태그명></태그명>").html("문자열") 이 방법이 정석이지만,

$("<태그명>").html("문자열") 이 방식도 가능하다.