문서객체생성

createElement는 html에서 요소를 생성할때 쓰는 메서드로 아래와 같이 변수를 선언하고 그 변수안에 요소를 집어넣고 appendChild로 해당 변수를 자식요소로 만들어서 body에 넣을 수 있다.

<head>

<title>Document</title>

</head>

<body>

const header=document.createElement("h1");

header.textContent="문서객체생성"

document.body.appendChild(header);

</script>

</body>

</html>

실제 바디태그에는 아무것도 입력하지 않고 자바를 사용해서 내용을 넣도록 하여 h1 태그르 생성할 수 있다.

const newImg=new Image();

//크기값을 지정하면 해당 크기에 맞춰서 이미지가 넣어지고 비우게 되면 해당 이미지의 크기에 맞게 생성된다.

const container=document.createElement("div");

container.setAttribute("class", "box");

newImg.src="./images1/w_walking1.png"

document.body.appendChild(container)

container.appendChild(newImg)

</script>

const container=document.createElement("div");

container.setAttribute("class", "ani");

const newImg=new Image();

for(let i=1; i<=8; i++){

const newImg=new Image();

newImg.src=`./images1/w_walking${i}.png`

container.appendChild(newImg)

}

document.body.appendChild(container)

let pic=document.querySelectorAll(".ani img")

pic[0].style.visibility="visible"

</script>

</body>

이미지 갤러리 활용

갈무리