Đang load dữ liệu
Đặt thuộc tính textContent của một Element là một cách để đề xuất văn bản trên một trang web.
Ví dụ, hãy xem xét thẻ HTML sau :
<p id = "paragraph"></p>
Để thay đổi thuộc tính textContent của nó, chúng ta có thể chạy JavaScript sau :>
document.getElementById(“paragraph”).textContent = “Hello, World”;
Thao tác này sẽ chọn phần tử có id paragraphand đặt nội dung văn bản của nó thành “Hello, World”:
<p id="paragraph">Hello, World</p>
(Xem thêm bản demo này)
Bạn cũng có thể sử dụng JavaScript để tao phần tử HTML mới theo chương trình. Ví dụ, xem xet một HTML với phần body sau:
Trong JavaScript của chúng tôi, chúng tội tạo một thẻ
mới có thuôc tính textContent và thêm nó vào cuối phần nội dung HTML :
var element =document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //Thêm phần tử mới được tao vào DOM
Điều đó sẽ thay đổi nội dung HTML của bạn thành như sau:
<body>
<h1>Adding an element</h1>
<p>Hello, World</p>
</body>
Lưu ý rằng để thao tác các phần tử trong DOM bằng JavaScript, mã JavaScript phải được chạy sau khi phần tử có liên quan đã được tạo trong tài liệu. Điều này có thể đạt đươc bằng cách đặt các thẻ JavaScript <script> sau tất cả các nội dung <body> khác. Ngoài ra, bạn cũng có thể sử dụng một bộ nghe sự kiện để nghe ví dụ. Sự kiện onload của window, việc thêm mã của bạn vào trình xử lý sự kiện đó sẽ trì hoãn việc chạy mã của bạn cho đến khi toàn bộ nội dung trên trang của bạn được tải xong.
Cách thứ ba để đảm bảo rằng tất cả các DOM của bạn đã được tải,là bọc mã các thao tác DOM với chức năng thời gian chờ là 0ms. Bằng cách này, mã Javascript này đươc xếp hàng lại ở cuối hàng đợi thực thi, điều này cho phép trình duyệt có cơ hội hoàn thành một số việc không phải JavaScript đang chờ kết thúc trước khi tham gia vào đoạn JavaScript mới này.
Tham khảo GoalKicker.com
Dịch: Devmaster Academy
.png "Lập trình frontend với reacjs (Full)")