HTML DOM Figure 객체는 HTML
구문
다음은 Figure 개체를 만드는 구문입니다. -
var p = document.createElement("FIGURE"); 예시
다음은 Figure 개체를 만드는 방법입니다 -
<!DOCTYPE html>
<html>
<head>
<script>
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servletsmini-logo.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}
</script>
</head>
<body>
<h2>HTML DOM figure object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CREATE 버튼 클릭 시 -
위의 예에서 -
사용자가 클릭할 때 createFigure() 함수를 실행할 CREATE 버튼을 먼저 만들었습니다.
<button onclick="createFigure()">CREATE>/button><br><br>
createFigure() 함수는 문서 객체의 createElement() 메소드를 사용하여 그림 요소를 생성합니다. setAttribute()를 사용하여 그림 요소의 ID를 설정하고 마지막으로 appendChild() 메서드를 사용하여 문서 본문에 추가합니다. 그런 다음 그림 요소 안에 이미지를 넣을 또 다른 요소 img를 만듭니다.
setAttribute() 메서드를 사용하여 img 요소 src, 너비, 높이 및 alt 값을 설정합니다. 마지막으로 img 요소는 appendChild() 메서드를 사용하여 그림 요소의 자식으로 추가됩니다. -
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "EiffelTower.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}