0:00:00.921,0:00:06.523
OK, cho đến hiện tại chúng ta đã chỉnh sửa rất nhiều phần tử trên trang web.

0:00:06.523,0:00:09.909
Nhưng nếu ta muốn thêm phần tử mới vào trang thì sao?

0:00:09.909,0:00:15.075
Ta có thể thực hiện điều đó với `innerHTML`, viết HTML cho những tag

0:00:15.075,0:00:18.926
bên trong chuỗi mà ta đưa vào, như ở đây.

0:00:18.926,0:00:22.258
Dù vậy nhưng có thể sẽ khá lộn xộn đấy, đặc biệt khi ta muốn tạo

0:00:22.258,0:00:25.540
nhiều tag với những thuộc tính, style, và class khác nhau.

0:00:25.540,0:00:31.097
Thay vì thế, ta có thể sử dụng nguyên một bộ thủ tục document

0:00:31.097,0:00:35.393
để tạo phần tử mới toanh và thêm vào trang web.

0:00:35.393,0:00:40.685
Giả sử ta muốn thêm một ảnh mèo vào trang,

0:00:40.685,0:00:44.018
vì ta nghĩ rằng vẫn hơi ít ảnh.

0:00:44.018,0:00:48.620
Bước đầu tiên là tạo phần tử mới ``, đúng không?

0:00:48.620,0:00:50.786
Ta phải tạo phần tử đó.

0:00:50.786,0:00:55.980
Ta sẽ bắt đầu bằng cách tạo một biến để lưu trữ phần tử, `catEI`.

0:00:55.980,0:01:00.935
Sau đó ta sẽ sử dụng `document.createElement`,

0:01:00.935,0:01:06.615
và đưa vào tên tag đang tạo, `img`.

0:01:06.615,0:01:12.065
Các bạn có thể tưởng tượng trình duyệt đã tạo một tag image, như thế này,

0:01:12.065,0:01:15.069
và nó đang lang thang ở đâu đó.

0:01:15.069,0:01:19.111
Bước tiếp theo là gán nguồn cho phần tử.

0:01:19.111,0:01:23.308
Vậy là, `catEI.src =`,

0:01:23.308,0:01:29.376
và ta chỉ việc lấy nguồn ở trên đây,

0:01:29.376,0:01:34.764
và—úi, ta nên thâm cả `alt` nữa, để giúp hình ảnh dễ truy cập hơn—

0:01:34.764,0:01:42.081
tôi quên mất đấy, lúc nào ta cũng nên có tag `alt` cho hình ảnh.

0:01:42.081,0:01:47.178
Bây giờ các bạn có thể hình dung tag `` mà ta vừa tạo

0:01:47.178,0:01:58.144
có một `src`, và cả một `alt`, “Photo of cute cat”.

0:01:58.144,0:02:04.928
OK, đây là những gì ta vừa tạo bằng JavaScript.

0:02:04.928,0:02:08.983
Tag `` vẫn đang lang thang đâu đó,

0:02:08.983,0:02:11.764
vì ta vẫn chưa lệnh cho trình duyệt phải đặt ở vị trí nào.

0:02:11.764,0:02:15.832
Ta có thể đặt tag ở rất nhiều vị trí khác nhau trong DOM.

0:02:15.832,0:02:21.342
Ta làm cái đơn giản nhất thôi nhé, hiển thị nó ở cuối trang là được.

0:02:21.342,0:02:26.304
Ta có thể thực hiện điều đó bằng cách dán vào cuối tag ``, như vậy ta nhập:

0:02:26.304,0:02:29.860
`document.body.appendChild(catEl);`

0:02:29.860,0:02:31.197
Haha—nó đây rồi!

0:02:31.197,0:02:32.711
Ảnh hơi to.

0:02:32.711,0:02:34.979
Mèo to khủng khiếp—sợ quá.

0:02:34.979,0:02:41.198
Bây giờ ta có thể gọi `appendChild` trên bất kỳ nốt DOM sẵn có nào trên trang web,

0:02:41.198,0:02:47.337
và nó sẽ biến phần tử vừa đưa vào thành phần tử con cuối cùng của nốt đó.

0:02:47.337,0:02:52.115
Đó là lúc DOM được trực quan hóa dưới dạng hình cây.

0:02:52.115,0:02:57.873
Tag `` là một nốt trên cây đó, và có cả tá con cái,

0:02:57.873,0:03:00.076
ví dụ như `` và ``,

0:03:00.076,0:03:04.395
và cuối phần tử con đó ta lại thêm một phần tử con khác.

0:03:04.395,0:03:09.074
Như vậy ta sẽ thêm vào sau tag ``, ngay đây.

0:03:09.074,0:03:13.320
Với các thủ tục DOM, về mặt lý thuyết ta sẽ có thể gắn phần tử

0:03:13.320,0:03:15.531
vào bất cứ đâu trên cây DOM.

0:03:15.531,0:03:19.447
Ta sẽ đưa nó vào vị trí dễ thấy nhất.

0:03:19.447,0:03:22.016
Được rồi, cùng làm thêm một ví dụ nữa nhé.

0:03:22.016,0:03:28.283
Ta đã sử dụng `innerHTML` ở dưới đây, để đưa tag `` vào trong ``.

0:03:28.283,0:03:31.443
Thay vào đó, ta có thể sử dụng `createElement`.

0:03:31.443,0:03:33.159
[đang gõ]

0:03:39.622,0:03:43.824
Tôi gõ nhầm mất rồi, chính tả rất quan trọng đấy nhé.

0:03:43.824,0:03:48.663
Như vậy sẽ tạo một tag `` trống, lang thang đâu đó.

0:03:48.663,0:03:51.879
Vì vậy, trước hết ta sẽ thiết lập văn bản,

0:03:51.879,0:03:56.573
`strongEl.textContent = "cat";`.

0:03:56.573,0:03:57.746
Được chưa?

0:03:57.746,0:04:01.816
Ta có thể chọn thực hiện thao tác khác,[br]55[br]00:04:01,816 --> 00:04:04,581[br]trong đó ta sẽ tạo `textNode`.

0:04:04.581,0:04:09.324
Nhiều nốt DOM trên cây DOM có thể chứa những loại nốt đặc biệt, các `textNode`,

0:04:09.324,0:04:10.726
làm nốt con.

0:04:10.726,0:04:14.998
Và những nốt ấy không phải là phần tử, nhưng vẫn là nốt trên cây DOM.

0:04:14.998,0:04:17.541
Trên thực tế ta gọi chúng là “nốt lá”, vì đó là

0:04:17.541,0:04:20.077
bộ phận sau chót trên cây.

0:04:20.077,0:04:21.736
[đang gõ]

0:04:27.548,0:04:31.816
Ta sẽ đưa vào văn bản, “cat”.

0:04:31.816,0:04:34.496
Khi sử dụng kỹ thuật này, tức là

0:04:34.496,0:04:42.169
ta đã tạo 2 nốt lang thang: một tag ``,

0:04:42.169,0:04:46.547
rồi đến `textNode` này, chỉ có nội dung là “cat”.

0:04:46.547,0:04:49.680
Và ta cần phải kết nối chúng với nhau.

0:04:49.680,0:04:54.910
Ta muốn `` là mẹ của “cat”.

0:04:54.910,0:05:03.152
Vì vậy ta sẽ nhập `strongEI.appendChild(strongText);`.

0:05:03.152,0:05:12.114
OK, vậy là ta đã có `` với “cat” bên trong,

0:05:12.114,0:05:18.582
và ta phải gắn vào vị trí theo ý muốn, vì nó vẫn đang lang thang đâu đó.

0:05:18.582,0:05:24.527
Ta đang ở trong vòng lặp `for` cho `nameEIs`, và mỗi `nameEIs`

0:05:24.527,0:05:27.354
là một vị trí ta cần gắn tag ``.

0:05:27.354,0:05:34.975
Ta có, `nameEIs[i].appendChild(strongEI);`.

0:05:34.975,0:05:42.195
Aha, giờ thì lại gấp đôi luôn, vì tôi vẫn để nguyên như cũ.

0:05:42.195,0:05:47.335
Ta đang gắn vào một tag `` đã có sẵn `` trong đó.

0:05:47.335,0:05:52.434
Ta có thể thay đổi dòng này thành `innerHTML` bằng chuỗi trống,

0:05:52.434,0:05:57.817
từ đó dọn sạch span trước khi ta gắn vào nó.

0:05:57.817,0:06:04.925
Hiện tại, như các bạn thấy, ta đã tiết kiệm được nhiều dòng mã hơn hẳn so với phương pháp `innerHTML`.

0:06:04.925,0:06:06.991
Vậy tại sao ta lại làm thế?

0:06:06.991,0:06:11.099
Rất nhiều nhà phát triển không thích chỉnh sửa tài liệu theo cách này

0:06:11.099,0:06:13.433
vì nó rất tốn mã.

0:06:13.433,0:06:16.714
Hầu hết đều sử dụng những thư viện như jQuery,

0:06:16.714,0:06:21.352
để chỉnh sửa DOM, từ đó cung cấp các hàm

0:06:21.352,0:06:26.873
cùng chức năng nhưng ít mã hơn rất nhiều,

0:06:26.873,0:06:29.310
vì ta đang sử dụng các hàm library thay thế.

0:06:29.310,0:06:33.366
Tôi thích viết mã theo phương pháp này, vì tôi có thể

0:06:33.366,0:06:38.666
thấy chính xác mình đang chỉnh sửa cây DOM như thế nào, từng dòng một.

0:06:38.666,0:06:43.043
Và cảm giác gọn gàng hơn rất nhiều so với nhồi tất cả mọi thứ vào một chuỗi innerHTML.

0:06:43.043,0:06:44.772
Nhưng có thể các bạn lại không thích.

0:06:44.772,0:06:47.188
Dù sao thì ta cũng biết nó có tồn tại.

0:06:47.188,0:06:50.939
Vì vậy các bạn có thể áp dụng nếu cần thiết, và có thể hiểu được

0:06:50.939,0:00:00.000
chức năng thực sự của những thư viện như jQuery.