아래 이미지처럼 body를 잡고 입력한 값들이 table 아래에 row로 추가되고 삭제버튼을 누르면 삭제 되게 만들자. 삭제는 전체삭제와 한 row만 지우는 개별 삭제가 있다. 삭제는 .hasChildNodes와 .removeChild를 활용한다. ID PW ADDR PHONE ID PW ADDR PHONE DEL
1. appendChild(): 부모태그에 자식 태그 추가 2. insertBefor(): 특정 기준점에 태그 추가 3. element이동 태그 추가하기 appendChild() insertBefore() appendChild를 이용한 element 이동 부모태그 div태그1 ※ childNodes: 해당 childNodes안의 text를 모두 포함 ※ children: text를 제외하고 안의 tag들만 포함
아래와 같이 왼쪽 화살표를 클릭하면 마지막 사진부터 순차적으로 바꿔지고 오른쪽 화살표를 클릭하면 다음 사진으로 바꿔지도록 한다. 단, gelElement를 사용한다. ◀ ▶
1. createImg() //1. 이름이 rdobtn인 요소들을 모두 가지고 온다. //2. 가져온 요소들을 반복문을 통해 하나씩 확인하면서 // 만일 체크되어 있다면 value값을 가지고 온다(변수: radioVal) //3. radioVal에 저장된 value값을 통해 img태그를 생성해서 // src 경로에 주입한다(경로: img) //4. 화면에 출력한다. 2. deleteImg() : 삭제버튼을 누르면 사진이 사라지도록 한다. 그림1 그림2 그림3 이미지 생성 이미지 삭제
1. createElement("tagName"): 엘리먼트 객체 생성 2-1. createTextNode("text내용"): 텍스트 객체 생성(방법 1) → 1번의 변수.appendChild(2번변수) 2-2. 1번의 변수.textContent("text내용"): 텍스트 객체생성(방법 2) 3-1. createAttribute("attrName"): 객체의 속성 생성(방법 1) → 속성추가 setAttributeNode(3-1변수) 3-2. setAttributeNode("attr", "value값"): 객체 속성 생성과 추가 동시에 엘리먼트 생성
1. 문자열 합치기 1) + 로 합치기 2) concat()사용하여 합치기 문자열 합치기확인 2. 다른 자료형 합치기 String 문자에 + 숫자를 더하면 String 형태로 합쳐진다. 다른 자료형 합치기확인 3. 문자열 비교하기 1) 동등연산자 == : 비교하는 자료형이 자동으로 형변환 2) 엄격한 비교 ===: 보여지는 값이 같더라도 type이 다르면 false (사용권장) 문자열 비교하기확인 num01에 담아준 10은 숫자이고 if 조건안에 "10"은 String이기 때문에 숫자는 같아보이지만 type이 다르므로 ===했을때 false 출력! strObj는 객체를 생성하여 담아주었고 strVal은 그저 String 타입으로 담아 주었다. 따라서 일반 동등연산자 ==비교를 하면 값이 같게 나오지만, ..
