jQuery를 사용하여 HTML 요소에 ID 추가
jQuery에서 명시적 함수는 HTML 요소에 클래스를 추가하는 역할만 합니다. 이 메소드는 addClass("className")로 사용됩니다.
그러나 id를 추가하는 경우에는 그러한 메소드가 정의되어 있지 않습니다. 일반적으로 HTML 요소의 id는 특이성 측면에서 더 다양하고 강력하게 만듭니다.
여기서는 HTML 요소에 id를 추가하는 두 가지 방법을 살펴보겠습니다. 그리고 전체 프로세스는 jQuery 규칙을 통해 수행됩니다.
첫 번째 솔루션은 .attr() 메서드를 사용하고 속성 id와 해당 값을 추가하는 것입니다. 그러면 요소에 대해 id가 설정됩니다.
다음으로 id를 추가할 수 있지만 이전 항목처럼 정의되지 않은 예제를 살펴보겠습니다. 여기에서 .add() 메서드의 매개변수로 HTML 요소를 사용하고 id를 추가합니다.
그럼 인스턴스로 설명을 미리 봅시다.
.attr() 메서드를 사용하여 jQuery를 사용하여 HTML 요소에 ID 추가
HTML 예제의 body 요소에는 p 태그가 있고 p 태그에는 강조 표시하려는 특정 단어가 있습니다. 또한 해당 태그가 있고 고유한 id가 있으면 가능합니다.
따라서 span 태그를 만들고 이에 대한 id를 만든 다음 CSS 속성을 추가하여 새로 생성된 id가 작동하는지 확인합니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to <span>DelftStack</span></p>
<script>
$("span").attr("id","intro");
$("#intro").css("color","darkcyan");
</script>
</body>
</html>
출력:
.add() 메서드를 사용하여 jQuery를 사용하여 HTML 요소에 ID 추가
이 경우에는 p 태그가 있지만 p 태그 아래에 span을 할당하지 않았습니다. p 태그의 인스턴스를 가져오고 .add() 메서드를 통해 HTML 요소를 추가하고 p 태그에 추가합니다.
새로 생성된 요소를 추가할 때까지 존재감을 표시하지 않습니다. 코드 라인을 확인해 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to </p>
<script>
$("p").add("<span id='intro'>DelftStack</span>").appendTo("p");
$("#intro").css("color","royalblue");
</script>
</body>
</html>
출력:
