0:00:00.921,0:00:06.523
지금까지는 페이지 상에[br]존재하는 요소들을 수정해봤어요

0:00:06.523,0:00:09.909
만약 페이지에[br]새로운 요소를 넣고 싶다면요?

0:00:09.909,0:00:12.985
'innerHTML'로[br]할 수 있어요

0:00:12.985,0:00:18.926
여기서 한 것 처럼[br]태그 안에 문자열을 쓰는거에요

0:00:18.926,0:00:21.068
약간 지저분해[br]질수도 있어요

0:00:21.068,0:00:25.540
특히 태그들이 서로 다른 속성과[br]스타일과 클래스를 가진다면요

0:00:25.540,0:00:31.097
그래서 대신에[br]굉장히 예쁜 방식을 쓸 거에요

0:00:31.097,0:00:35.393
처음부터 요소를 만들어서[br]페이지에 넣을 거에요

0:00:35.393,0:00:40.685
페이지에 고양이 그림을[br]넣고 싶다고 해봐요

0:00:40.685,0:00:44.018
왜냐하면[br]좀 더 필요할 것 같으니까요

0:00:44.018,0:00:48.620
첫번째 단계는[br]''요소를 만드는 거에요

0:00:48.620,0:00:50.786
저걸 만들고[br]싶어요

0:00:50.786,0:00:54.520
그럼 이 요소를 넣을[br]변수를 만들어요

0:00:54.520,0:00:55.980
'catEl'

0:00:55.980,0:01:00.935
그 다음에는 이걸 쓸거에요[br]'document.createElement'

0:01:00.935,0:01:03.615
그리고 우리가 만드는[br]태그의 이름을 넣어요

0:01:03.615,0:01:06.615
'img'

0:01:06.615,0:01:12.065
이제 브라우저가 이미지 태그를[br]만들었다고 할 수 있죠

0:01:12.065,0:01:15.069
여기 어딘가[br]돌아다니고 있을거에요

0:01:15.069,0:01:19.111
다음 단계는[br]경로를 추가하는 거에요

0:01:19.111,0:01:23.308
그러니까[br]'catEl.src ='

0:01:23.308,0:01:29.376
그리고 여기서[br]경로를 가져와서

0:01:29.376,0:01:34.764
'alt'를 추가해야해요[br]좀 더 접근이 용이하게요

0:01:34.764,0:01:42.081
지금까지 하진 않았지만[br]'alt'태그를 추가해줘야해요

0:01:42.081,0:01:47.178
이제 우리가 만든[br]태그에 'src'가 있고

0:01:47.178,0:01:58.144
"Photo of cute cat"[br]이라는 'alt'도 있어요

0:01:58.144,0:02:04.928
좋아요 이게 지금까지[br]자바스크립트로 만든 거에요

0:02:04.928,0:02:08.983
우리가 만든 ''태그는[br]아직 어딘가 돌아다니고 있어요

0:02:08.983,0:02:11.764
왜냐하면 브라우저에게 이걸[br]어디 놓을지 지정하지 않았으니까요

0:02:11.764,0:02:15.832
그리고 DOM에는 이걸[br]넣을 수 있는 곳들이 아주 많아요

0:02:15.832,0:02:18.342
가장 쉬운[br]방법으로 해보죠

0:02:18.342,0:02:21.342
페이지 하단에[br]보이게 하는거에요

0:02:21.342,0:02:26.304
이건 태그의[br]뒤에 붙여주면 될거에요

0:02:26.304,0:02:29.860
그러니까[br]'document.body.appendChild(catEl);'

0:02:29.860,0:02:31.197
하하[br]저기 있네요!

0:02:31.197,0:02:32.711
게다가[br]꽤 크기까지 해요

0:02:32.711,0:02:34.979
정말 큰 고양이네요[br]무서워라

0:02:34.979,0:02:41.198
여러분은 'appendChild'를[br]아무 DOM에다가 붙일 수 있어요

0:02:41.198,0:02:47.337
그럼 그 DOM의[br]마지막에 이 요소를 붙일 거에요

0:02:47.337,0:02:52.115
이걸 보면 DOM을[br]트리 형태로 생각할 수 있어요

0:02:52.115,0:02:57.873
태그가[br]트리의 노드이고

0:02:57.873,0:03:00.076
거기에 여러 자식 노드가 있어요[br]이나 처럼요

0:03:00.076,0:03:04.395
여러분은 이 자식 노드 다음에[br]다른 자식 노드를 더하는 거에요

0:03:04.395,0:03:09.074
그러니까 그건 여기있는[br]태그 다음에 올 거에요

0:03:09.074,0:03:11.950
DOM방식을 사용하면[br]이론적으로는

0:03:11.950,0:03:15.531
DOM트리 안의 어디든[br]요소들을 붙일 수 있어요

0:03:15.531,0:03:19.447
우리는 가장 쉽고[br]가장 뻔한 곳에 넣었어요

0:03:19.447,0:03:22.016
좋아요[br]하나 더 해봐요

0:03:22.016,0:03:28.283
여기에는 'innerHTML'을 써서[br]안에 태그를 썼어요

0:03:28.283,0:03:31.443
대신에[br]'createElement'를 쓸 수 있어요

0:03:31.443,0:03:39.623
그러니까 'var strongEl =[br]document.createElement("strong");'

0:03:39.623,0:03:43.824
철자가 틀렸는데[br]철자는 매우 중요해요

0:03:43.824,0:03:48.663
비어있는 태그를[br]어딘가 떠다니게 만들었어요

0:03:48.663,0:03:51.879
첫번째로 할 것은[br]텍스트를 지정하는 거에요

0:03:51.879,0:03:56.573
그러니까[br]'strongEl.textContent = "cat";'

0:03:56.573,0:03:57.746
그렇죠?

0:03:57.746,0:04:01.816
대신에 우리는[br]다른 걸로도 할 수 있어요

0:04:01.816,0:04:04.581
'textNode'라는 걸[br]만들어서 말이죠

0:04:04.581,0:04:08.504
DOM트리의 여러 DOM노드는[br]특별한 노드를 가질 수 있어요

0:04:08.504,0:04:10.726
'textNode'를[br]그들의 자식으로 말이죠

0:04:10.726,0:04:14.998
이 노드들은 요소는 아니지만[br]DOM트리의 노드에요

0:04:14.998,0:04:16.501
이걸 '잎 노드'라고[br]불러요

0:04:16.501,0:04:20.088
왜냐하면 트리의[br]마지막에 오는 노드니까요

0:04:20.088,0:04:27.548
그러니까 'var stongText =[br]document.createTextNode('

0:04:27.548,0:04:31.816
여기다 텍스트를 넣을게요[br]"cat"

0:04:31.816,0:04:33.736
이 방법을[br]쓰게 된다면

0:04:33.736,0:04:39.749
이제 돌아다니는[br]두 개의 노드를 만든 거에요

0:04:39.749,0:04:41.937
태그와[br]

0:04:41.937,0:04:46.860
"cat"을 담은[br]'textNode'죠

0:04:46.860,0:04:50.110
이걸 서로[br]연결시켜줘야 해요

0:04:50.110,0:04:55.102
이[br]"cat"의 부모가 돼야해요

0:04:55.102,0:05:01.504
그러면 이렇게[br]'strongEl.appendChild(strongText);'

0:05:03.389,0:05:10.445
좋아요 이제[br]안에 "cat"이 있어요

0:05:12.512,0:05:17.852
이걸 원하는 곳에 넣어야해요[br]아직 떠다니고 있으니까요

0:05:17.852,0:05:22.286
우리는 'nameEls'의[br]'for'문안에 있고

0:05:23.186,0:05:27.073
각 'nameEl'에다가[br]태그를 붙이고 싶어요

0:05:27.073,0:05:34.565
그럼 여기[br]'nameEls[i].appendChild(strongEl);'

0:05:36.219,0:05:42.742
이제 두 개를 볼 수 있네요[br]저번 것이 아직 있기 때문이죠

0:05:42.742,0:05:47.410
그러니까 태그에[br]이 있는데 또 붙어있어요

0:05:47.410,0:05:52.496
이 부분은 'innerHTML'에[br]빈 문자열을 넣으면 돼요

0:05:52.496,0:05:56.320
이게 붙은 안을[br]지워줄거에요

0:05:57.938,0:06:03.459
지금 봤듯이 이건 'innerHTML'보다[br]훨씬 더 많은 코드를 써야해요

0:06:05.105,0:06:07.397
그러면[br]왜 이렇게 하는 걸까요?

0:06:07.397,0:06:10.783
많은 개발자들은 이런 방식으로[br]수정하는 걸 좋아하지 않아요

0:06:10.783,0:06:13.794
왜냐하면 코드를[br]더 많이 써야하니까요

0:06:13.794,0:06:17.026
보통 개발자들은[br]jQuery같은 라이브러리를 써요

0:06:17.026,0:06:19.656
그들이 DOM을[br]수정할 때요

0:06:19.656,0:06:26.800
개발자로서는 코드를 덜 쓰고도[br]같은 기능을 만들 수 있게 돼요

0:06:26.800,0:06:29.780
왜냐하면 대신에[br]라이브러리 함수를 쓰니까요

0:06:29.780,0:06:32.446
저는 이런 식으로[br]코드를 쓰는 걸 좋아해요

0:06:32.446,0:06:36.226
어떻게 DOM트리를[br]수정하는지 볼 수 있으니까요

0:06:36.226,0:06:38.276
한번에[br]하나씩 말이죠

0:06:38.276,0:06:39.913
그리고[br]더 깔끔해 보여요

0:06:39.913,0:06:43.043
innerHTML안에 문자열로[br]다 집어넣는 것보다 말이죠

0:06:43.043,0:06:44.772
하지만 여러분은[br]싫어할 수도 있어요

0:06:44.772,0:06:47.188
어떤 방법으로든 이제 여러분은[br]이런 게 있다는 걸 알아요

0:06:47.188,0:06:49.529
만약 여러분이 필요하다면[br]사용할 수 있고

0:06:49.529,0:06:54.664
jQuery같은 라이브러리가[br]뒤에서 뭘 하는지 알 수 있어요