Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 코드 객체

<시간/>

HTML DOM 코드 개체는 HTML 5 태그와 연결됩니다. 요소 내에서 코드 조각을 둘러싸서 마크업하는 데 사용됩니다. Code 개체는 기본적으로 요소를 나타냅니다.

구문

다음은 −

의 구문입니다.

코드 개체 만들기 -

var a = document.createElement("CODE");

예시

HTML DOM 코드 개체에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<p>Click the below button to create a CODE element with some text</p>
<button onclick="createCode()">CREATE</button><br><br>
<script>
   function createCode() {
      var x = document.createElement("CODE");
      var t = document.createTextNode("print('HELLO WORLD')");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

출력

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

HTML DOM 코드 객체

CREATE 클릭 시 -

HTML DOM 코드 객체

위의 예에서 -

사용자가 클릭할 때 createCode() 메서드를 실행하는 CREATE 버튼을 만들었습니다. −

<button onclick="createCode()">CREATE</button><br><br>

createCode() 메소드는 문서 객체에 createElement(“CODE”) 메소드를 사용하여 요소를 생성합니다. 생성된 요소는 변수 x에 할당됩니다. 그런 다음 문서 객체의 createTextNode() 메서드를 사용하여 일부 텍스트가 있는 텍스트 노드가 생성됩니다. 이 텍스트 노드는 변수 x의 appendChild() 메서드를 사용하여 요소에 자식으로 추가됩니다.

텍스트 노드와 함께 이 요소는 appendChild() 메서드를 사용하여 문서 본문의 자식으로 추가됩니다. -

function createCode() {
   var x = document.createElement("CODE");
   var t = document.createTextNode("print('HELLO WORLD')");
   x.appendChild(t);
   document.body.appendChild(x);
}