insertAdjacentHTML

Level 3 : 5~8 (ajax, json, array, sort)

5. 카드레이아웃에 데이터를 불러와 카드 3개 생성하기 원시자바스크립트버전 let cardWrap = document.querySelector('.row'); let products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50000, title : 'Springfield Shirt' }, { id : 2, price : 60000, title : 'Black Monastery' } ]; products.forEach(function(a, i){ let card = ` ${products[i]['title']} ${products[i]['price']} ` cardWrap.insertAdjacentHTML('bef..

[코딩애플,mdn] js로 html 생성하는 법 (appendChild, createElement, insertAdjacentHTML 등)

1. document.createElement() / appendChild() / clondeNode() / importNode() document.createElement() : html 자료를 생성한다. element.appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. (한 노드는 문서상의 두 지점에 동시에 존재할 수 없으므로, 노드가 이미 부모가 있다면 삭제되고 새로운 위치로 이동한다.) * append()와의 차이점 : append는 jquery에서 지원하는 메소드로, 원시 자바스크립트인 appendChild()와 다르다. 또한 append는 .append(`내용`) 처럼 요소를 바로 때려박을 수 있는 반면, appendChild()는 creat..