[JavaScript] 요소 생성,삽입

먼저 HTML로 이미지삽입 버튼과 삭제 버튼을 만든다. 그리고 h3으로 이미지가 나타나는 곳을 표시한다.

버튼의 onclick속성에 자바스크립트에서 불러올 함수 이름들을 넣는다.

 

 

 

JavaScript를 열고, querySelector로 html에 있는 유일한 div 태그를 불러와서 div 변수에 집어넣는다.

그리고 html에서 버튼의 onclick 속성에 집어넣었던 이름들로 함수를 만든다.

먼저 addImage()는 이미지 태그를 추가하는 역할을 하고, rmImage() 만들었던 이미지 태그를 삭제하는 역할을 한다.

먼저 만들고 싶은 이미지 태그를 작은 따옴표 안에 적고, imgTag 변수 안에 집어넣는다.

그리고 innerHTML을 이용하여 div의 HTML을 가져오고, 그 속에 만들었던 이미지태그를 집어넣는다.

버튼을 누를때마다 이미지를 하나씩 추가하는 방식을 원한다면 += 로 집어넣는것이 좋다.

rmImage() 함수는 이미지를 삭제하는 함수인데, 그냥... div의 HTML을 가져온 뒤, 공백을 집어넣으면 끝이다.

 

 

 

'이미지삽입' 버튼을 누를 때 마다 이미지가 하나씩 추가되어 나타나고, 이미지 삭제를 누르면 만들어졌던 모든 이미지들이 삭제된다.

 

 

 

 

용어

.getElementsByTagName : 태그 이름으로 가져오기

.getElementById : ID로 정확하게 하나의 요소만 가져오기

.getElementsByClassName : Class 이름으로 가져오기

.getElementsByName : name으로 가져오기

.queryselector : 요소의 CSS 문법으로 하나의 요소 특정해서 가져오기

.queryselectorAll : CSS 문법에 맞는 요소 전부 가져오기

 

.innerHTML : HTML 을 그대로 가져옴

.innerTEXT : 텍스트만 가져옴 (공백을 한 라인에)

.innerContent : 텍스트와 공백 가져옴