HTML DOM 헤더 객체는 HTML 5에 도입된 HTML
구문
다음은 −
의 구문입니다.헤더 객체 생성 -
var p = document.createElement("HEADER"); 예시
HTML DOM 헤더 객체에 대한 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<body>
<h1>Header object example</h1>
<p>Create a header element by clicking the below button</p>
<button onclick="headerCreate()">CREATE</button>
<script>
function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CREATE 버튼 클릭 시 -
위의 예에서 -
사용자가 클릭할 때 createHeader() 메서드를 실행하는 CREATE 버튼을 만들었습니다. −
<button onclick="headerCreate()">CREATE</button>
headerCreate() 메서드는 문서 객체에 createElement() 메서드를 사용하여 헤더 요소를 생성하고 변수 h에 할당합니다. 그런 다음 문서 본문에서 appendChild() 메서드를 호출하여 헤더를 문서 본문에 자식으로 추가합니다. 위의 동일한 방법을 사용하여 문서 개체의 createTextNode() 메서드를 사용하여
요소와 이에 대한 텍스트 노드를 만듭니다.
텍스트 노드는 appendChild() 메서드를 사용하여
요소에 추가됩니다. 마지막으로 텍스트 노드와 함께 요소는 appendChild() 메서드를 사용하여 헤더 요소의 자식으로 추가됩니다 - function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}
function headerCreate() {
var h = document.createElement("HEADER");
document.body.appendChild(h);
var h2 = document.createElement("H2");
var txt = document.createTextNode("Header element containing a h2 element is now created");
h2.appendChild(txt);
h.appendChild(h2);
}