개발 잘하기

append() 관련 검색 중 제목에 담긴 메소드를 모두 활용한 코드 예시가 있어 보관 목적으로 가져왔다. HTML에 요소를 직접 생성하지 않고 JS로만 아래 사항을 구현했다. ①HTML 요소를 생성함. ②row class 요소 안의 자식 요소로 추가삽입함. ②innerHTML을 활용해 태그와 배열 item을 객체로 title 및 price property 활용함 ③배열 item을 객체로 순회할 수 있도록 forEach() 사용함. (1)HTML (2)JS let products = [ {id: 0, price: 70000, title: "꽃무늬 원피스"}, {id: 1, price: 50000, title: "데님 셔츠"}, {id: 2, price: 60000, title: "트러커 재킷"}, ]; ..

1) 요소 생성하기 - createElement() 인수로 "HTML 태그"를 입력한다. const hello = document.createElement( "h1" ) // 코드가 생성된다. 2) 부모자식관계로 요소 추가하기 - appendChild() 유용함 (1) append()와 appendChild() 둘 다 선택한 객체의 자식 요소로 인수를 (뒤에) 추가한다. document.body.appendChild(hello); // 태그 코드를 가진 hello라는 변수가 body태그 내부에 생성된다. 상기 메소드는 아래와 같은 차이가 존재한다. ①append() - 인수로 요소 외에 문자열(String)을 사용할 수도 있음. // DOMString 삽입 const parent = document.cr..

1)DOM Introduction (1)MDN 정의 The Document Object Model (DOM) is a programming interface for HTML. An application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries. (2)Vanilla Coding 주어진 인터페이스를 이용하여 원하는대로 TV를 조종할 수 있습니다.마찬가지로 DOM이라는 인터페이스를 이용한다면, 자바스크립트를 이용하여 HTML 문서를 조종할 수 있습니다. 단, 자바스크립트의 DOM으로 HTML 문서에 접근하고 조종하게 되는 것이 HTML ..