HTML DOM Figcaption 객체

<시간/>

HTML DOM Figcaption 개체는 HTML5

요소를 나타내는 데 사용됩니다. createElement() 및 getElementById() 메소드를 각각 사용하여 figcaption 요소를 생성하거나 액세스할 수 있습니다.

구문

다음은 −

의 구문입니다.

Figcaption 개체 만들기 -

var p = document.createElement("FIGCAPTION");

예시

Figcaption 개체의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<script>
   function createCaption() {
      var caption = document.createElement("FIGCAPTION");
      var txt = document.createTextNode("Learn Java Servlets");
      caption.appendChild(txt);
      var f=document.getElementById("Figure1");
      f.appendChild(caption);
   }
</script>
</head>
<body>
<h2>Caption</h2>
<p>Create a caption for the below image by clicking the below button</p>
<button onclick="createCaption()">CREATE</button>
<figure id="Figure1">
<img src="https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg"
alt="Servlets" width="250" height="200">
</figure>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM Figcaption 객체

CREATE 버튼 클릭 시 -

HTML DOM Figcaption 객체

위의 예에서 -

먼저 id가 "Figure1"인 그림 요소를 생성했으며 그 안에 img 요소가 포함되어 있습니다 -

<figure id="Figure1">
<img src="EiffelTower.jpg" alt="Eiffel Tower" width="250" height="200">
</figure>

그런 다음 사용자가 클릭할 때 createCaption() 메서드를 실행하는 CREATE() 버튼을 만듭니다.

<button onclick="createCaption()">CREATE</button>

createCaption() 메서드는 문서 객체의 createElement() 메서드를 사용하여 figcaption 요소를 생성합니다. 문서 본문의 createTextNode() 메서드를 사용하는 텍스트 노드가 생성되어 figcaption 요소에 추가됩니다. 그런 다음 getElementById() 메서드를 사용하여 그림 요소를 가져오고 appendChild() 메서드를 사용하여 텍스트 노드와 함께 figcaption을 자식 요소로 추가합니다. -

function createCaption() {
   var caption = document.createElement("FIGCAPTION");
   var txt = document.createTextNode("Eiffel Tower in Paris,France");
   caption.appendChild(txt);
   var f=document.getElementById("Figure1");
   f.appendChild(caption);
}