HTML DOM DFN 객체

<시간/>

HTML DOM DFN 개체는 HTML 요소와 연결됩니다. 요소 내부의 텍스트는 주변 컨텍스트에서 정의되는 텍스트입니다. DFN 개체는 요소를 나타냅니다.

구문

다음은 −

의 구문입니다.

DFN 개체 만들기 -

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

예시

HTML DOM DFN 개체의 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>DFN object example</h2>
<p>Click the below button to create a dfn element with some text inside it.</p>
<button onclick="dfnCreate()">CREATE</button> <br><br>
<script>
   function dfnCreate() {
      var x = document.createElement("DFN");
      var t = document.createTextNode("The defination element");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

출력

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

HTML DOM DFN 객체

CREATE 버튼 클릭 시 -

HTML DOM DFN 객체

사용자가 클릭할 때 dfnCreate() 함수를 실행할 CREATE 버튼을 먼저 만들었습니다.

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

dfnCreate() 메소드는 문서 객체의 createElement() 메소드를 사용하여 요소를 생성합니다. 그런 다음 createTextNode() 메서드를 사용하여 텍스트 노드를 만듭니다. 그런 다음 텍스트 노드는 요소에 자식으로 추가됩니다. 마지막으로 텍스트 노드와 함께 요소는 appendChild() 메서드를 사용하여 문서 본문의 자식으로 추가됩니다. -

function dfnCreate() {
   var x = document.createElement("DFN");
   var t = document.createTextNode("The definition element");
   x.appendChild(t);
   document.body.appendChild(x);
}