동적 HTML 삽입

스크립트를 사용하여 동적으로 HTML을 삽입할 수 있다.

HTML을 삽입하고자하는 HTML노드를 query를 활용하여 얻고 DOM 스크립트 및 JQuery를 사용하여 작업을 수행한다.

HTML을 삽입하고 자하는 html node를 얻기위해서는 query를 작성해야 하는데 DOM과 jquery 모두 비슷하게 작성한다.

jquery : $("div[data-bind=d01] div article");   DOM: document.querySelector("div[data-binding='do1'] div article");

위 예에서 쿼리는 다음과 같이 해석된다. 

1. 속성이 "data-bind"이고 값이 "do1"인 div 를 찾고

2. 그 자식 중 div 노드를 찾고 

3. 또 그자식 중 article 노드를 찾아라

// jquery 사용
var el = $("div[data-bind=d01] div article");
el.html("
hahaha
");

// DOM 사용 
var el = document.querySelector("div[data-bind='d01'] div article");
el.innerHTML = "
ccccc
";