createElement
존재하지 않던 요소 만들어내서 원하는 위치에 끼워넣기
요소 생성 : document.createElement(“요소명”)
함수를 참조한 위치는 반드시 어떤 값으로 바뀌기 때문에
만들어진 그 요소의 참조값으로 바뀜 !!!
ex) (“div”), (“p”), (“li”) ...
-> 요소 생성 후 값을 변수에 담아야 함, 안그러면 그냥 버려짐
ex) ul리스트 안의 li 추가하기
document.querySelector("addBtn").addEventListener("click", function(){
let name=document.querySelector("#inputName").value;
// 2. li 요소를 만들어서 입력한 이름을 innerText에 넣어준다. + 변수에 담기
let li=document.createElement("li");
// 3. 만든 li 요소를 ul의 자식요소로 추가하기 (append)
li.innerText=name;
document.querySelector("#list").append(li);
// 4. 입력창 지우기
document.querySelector("#inputName").value="";
});- 새로 만든 요소에 같은 이벤트리스너 추가해주기
// 5. 새로 만든 li요소에 click이벤트리스너 등록 ★★★
li.addEventListener("click", function(){
let isDelete=confirm(this.innerText+" 를(을)삭제하시겠습니까 ?");
if (isDelete){
this.remove();
}
- append
ul에다가 append써서 추가하고싶은거 추가하면 추가됨 !
여기서 name: string type
li : object type
```
// * 요소를 클릭하면 지워지도록 해보기, 이 목록은 배열이니까 querySelectorAll, 반복문 필요 !
// 배열 먼저 변수에 담아주고 반복문돌리고 이벤트함수!
// 페이지 로딩 시점에 이미 만들어져 있는 li의 참조값을 배열에 담아오기
let lis=document.querySelectorAll("#list > li"); // 모든 li요소의 참조값이 들어있는 배열(아직 []안함)
// 반복문 돌면서
for(let i=0; i<lis.length; i++){
// 순서대로 이벤트리스너 함수를 등록한다.
lis[i].addEventListener("click", function(){ // lis[i] : 모든 li의 참조값
// click이벤트가 일어난 바로 그 요소
// lis[i].remove();
let isDelete=confirm(this.innerText+" 를(을)삭제하시겠습니까 ?");
if (isDelete){
this.remove(); // 함수 호출시 () 잊지 않기 !
}
});
}-->220407, 한글파일에 추가설명 보기 !
setAttribute : 이미지 속성을 지정하는 함수 , createElement로 이미지 생성도 가능 !!
형태 : setAttribute("속성명", "속성값")
document.querySelector("#makeBtn").addEventListener("click", function(){
let img=document.createElement("img"); // 변수 지정
img.setAttribute("src", "images/kim1.png"); // 속성 지정할 img 찍고 ! setAttribute
document.querySelector("#wrapper").append(img);그 외 다양한 속성들
