Nội dung

36.12 JS DOMTutorial Tạo và Thêm Phần Tử Mới Vào DOM Với Append và Prepend

Trong video này, chúng ta sẽ khám phá cách sử dụng các phương thức `append` và `prepend` trong JavaScript để thêm các phần tử vào một phần tử cha trên trang web. Đây là những phương thức rất hữu ích khi bạn muốn động thêm nội dung vào trang mà không cần phải tái tạo lại toàn bộ nội dung của phần tử cha. Đầu tiên, chúng ta sẽ tìm hiểu về phương thức `append`. Đây là phương thức dùng để thêm một hoặc nhiều phần tử vào cuối phần tử cha. Chúng ta sẽ bắt đầu bằng việc tạo một thẻ `img` mới và thiết lập thuộc tính `src` để chỉ định đường dẫn đến hình ảnh mà chúng ta muốn hiển thị. Sau đó, chúng ta sẽ thêm thẻ này vào phần tử `body` của trang web bằng cách sử dụng `document.body.append(newImg)`. Cuối cùng, chúng ta sẽ thiết lập chiều rộng của hình ảnh để nó chiếm 100% chiều rộng của viewport. Tiếp theo, chúng ta sẽ tạo một thẻ `p` mới và thêm một đoạn văn bản vào bên trong thẻ này. Chúng ta cũng sẽ thêm thẻ này vào phần tử `body` bằng phương thức `append`. Trong ví dụ tiếp theo, chúng ta sẽ sử dụng `append` để thêm nội dung vào một phần tử khác đã tồn tại trên trang. Chúng ta sẽ chọn một phần tử có class là `hero__desc` và thêm một đoạn văn bản vào cuối phần tử này. Chúng ta cũng sẽ tìm hiểu cách thêm nhiều phần tử mới vào cuối một phần tử cha. Chúng ta sẽ tạo một thẻ `p` và một thẻ `span`, sau đó thêm cả hai thẻ này vào một phần tử cha có class là `hero__heading`. Chúng ta sẽ thấy rằng chúng ta có thể thêm nhiều phần tử cùng một lúc bằng cách truyền các phần tử này vào phương thức `append`. Sau khi đã nắm vững cách sử dụng `append`, chúng ta sẽ chuyển sang phương thức `prepend`. Phương thức này hoạt động tương tự như `append`, nhưng thay vì thêm các phần tử vào cuối phần tử cha, nó sẽ thêm các phần tử vào đầu phần tử cha. Chúng ta sẽ thêm một đoạn văn bản vào đầu phần tử có class là `hero__heading` để minh họa cách sử dụng `prepend`. Trong suốt video, chúng ta sẽ sử dụng nhiều ví dụ thực tế để minh họa cho các khái niệm này, giúp bạn dễ dàng hiểu và áp dụng vào các dự án của mình. Bạn sẽ thấy rằng các phương thức `append` và `prepend` rất linh hoạt và mạnh mẽ, cho phép bạn dễ dàng thao tác với DOM và cập nhật nội dung trang web một cách động. Hãy theo dõi video để nắm bắt chi tiết cách sử dụng các phương thức này và khám phá thêm nhiều kỹ thuật hay khác trong JavaScript. Đây sẽ là những kỹ năng hữu ích giúp bạn trở thành một lập trình viên web chuyên nghiệp. Nếu bạn có bất kỳ câu hỏi hoặc thắc mắc nào, đừng ngần ngại để lại bình luận bên dưới video. Chúc bạn học tập vui vẻ và thành công với JavaScript!