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.
Nhưng nếu ta muốn thêm phần tử mới vào trang thì sao?
Ta có thể thực hiện điều đó với `innerHTML`, viết HTML cho những tag
bên trong chuỗi mà ta đưa vào, như ở đây.
Dù vậy nhưng có thể sẽ khá lộn xộn đấy, đặc biệt khi ta muốn tạo
nhiều tag với những thuộc tính, style, và class khác nhau.
Thay vì thế, ta có thể sử dụng nguyên một bộ thủ tục document
để tạo phần tử mới toanh và thêm vào trang web.
Giả sử ta muốn thêm một ảnh mèo vào trang,
vì ta nghĩ rằng vẫn hơi ít ảnh.
Bước đầu tiên là tạo phần tử mới ``, đúng không?
Ta phải tạo phần tử đó.
Ta sẽ bắt đầu bằng cách tạo một biến để lưu trữ phần tử, `catEI`.
Sau đó ta sẽ sử dụng `document.createElement`,
và đưa vào tên tag đang tạo, `img`.
Các bạn có thể tưởng tượng trình duyệt đã tạo một tag image, như thế này,
và nó đang lang thang ở đâu đó.
Bước tiếp theo là gán nguồn cho phần tử.
Vậy là, `catEI.src =`,
và ta chỉ việc lấy nguồn ở trên đây,
và—úi, ta nên thâm cả `alt` nữa, để giúp hình ảnh dễ truy cập hơn—
tôi quên mất đấy, lúc nào ta cũng nên có tag `alt` cho hình ảnh.
Bây giờ các bạn có thể hình dung tag `` mà ta vừa tạo
có một `src`, và cả một `alt`, “Photo of cute cat”.
OK, đây là những gì ta vừa tạo bằng JavaScript.
Tag `` vẫn đang lang thang đâu đó,
vì ta vẫn chưa lệnh cho trình duyệt phải đặt ở vị trí nào.
Ta có thể đặt tag ở rất nhiều vị trí khác nhau trong DOM.
Ta làm cái đơn giản nhất thôi nhé, hiển thị nó ở cuối trang là được.
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:
`document.body.appendChild(catEl);`
Haha—nó đây rồi!
Ảnh hơi to.
Mèo to khủng khiếp—sợ quá.
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,
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 đó.
Đó là lúc DOM được trực quan hóa dưới dạng hình cây.
Tag `` là một nốt trên cây đó, và có cả tá con cái,
ví dụ như `` và ``,
và cuối phần tử con đó ta lại thêm một phần tử con khác.
Như vậy ta sẽ thêm vào sau tag ``, ngay đây.
Với các thủ tục DOM, về mặt lý thuyết ta sẽ có thể gắn phần tử
vào bất cứ đâu trên cây DOM.
Ta sẽ đưa nó vào vị trí dễ thấy nhất.
Được rồi, cùng làm thêm một ví dụ nữa nhé.
Ta đã sử dụng `innerHTML` ở dưới đây, để đưa tag `` vào trong ``.
Thay vào đó, ta có thể sử dụng `createElement`.
[đang gõ]
Tôi gõ nhầm mất rồi, chính tả rất quan trọng đấy nhé.
Như vậy sẽ tạo một tag `` trống, lang thang đâu đó.
Vì vậy, trước hết ta sẽ thiết lập văn bản,
`strongEl.textContent = "cat";`.
Được chưa?
Ta có thể chọn thực hiện thao tác khác, 55 00:04:01,816 --> 00:04:04,581 trong đó ta sẽ tạo `textNode`.
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`,
làm nốt con.
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.
Trên thực tế ta gọi chúng là “nốt lá”, vì đó là
bộ phận sau chót trên cây.
[đang gõ]
Ta sẽ đưa vào văn bản, “cat”.
Khi sử dụng kỹ thuật này, tức là
ta đã tạo 2 nốt lang thang: một tag ``,
rồi đến `textNode` này, chỉ có nội dung là “cat”.
Và ta cần phải kết nối chúng với nhau.
Ta muốn `` là mẹ của “cat”.
Vì vậy ta sẽ nhập `strongEI.appendChild(strongText);`.
OK, vậy là ta đã có `` với “cat” bên trong,
và ta phải gắn vào vị trí theo ý muốn, vì nó vẫn đang lang thang đâu đó.
Ta đang ở trong vòng lặp `for` cho `nameEIs`, và mỗi `nameEIs`
là một vị trí ta cần gắn tag ``.
Ta có, `nameEIs[i].appendChild(strongEI);`.
Aha, giờ thì lại gấp đôi luôn, vì tôi vẫn để nguyên như cũ.
Ta đang gắn vào một tag `` đã có sẵn `` trong đó.
Ta có thể thay đổi dòng này thành `innerHTML` bằng chuỗi trống,
từ đó dọn sạch span trước khi ta gắn vào nó.
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`.
Vậy tại sao ta lại làm thế?
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
vì nó rất tốn mã.
Hầu hết đều sử dụng những thư viện như jQuery,
để chỉnh sửa DOM, từ đó cung cấp các hàm
cùng chức năng nhưng ít mã hơn rất nhiều,
vì ta đang sử dụng các hàm library thay thế.
Tôi thích viết mã theo phương pháp này, vì tôi có thể
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.
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.
Nhưng có thể các bạn lại không thích.
Dù sao thì ta cũng biết nó có tồn tại.
Vì vậy các bạn có thể áp dụng nếu cần thiết, và có thể hiểu được
chức năng thực sự của những thư viện như jQuery.