Đoạn mã JavaScript trên là để hiển thị các bài viết từ một nguồn dữ liệu cụ thể và sau đó đưa chúng vào trong các thẻ HTML, mặc định là sử dụng document.write() để viết nội dung trực tiếp vào trang web.
Để chỉnh sửa mã để hiển thị danh sách bài viết vào một <div> cụ thể, bạn cần thay đổi việc truy cập vào vị trí hiển thị. Thay vì sử dụng document.write(), bạn sẽ cần sử dụng các phương thức khác để thêm nội dung vào một phần tử HTML có sẵn trong trang, thông thường là thông qua việc thêm vào nội dung của một phần tử div.
Dưới đây là một phiên bản sửa đổi của mã JavaScript để chèn danh sách bài viết vào một phần tử <div> với một ID cụ thể (ví dụ: "post-list"):
Được rồi, để làm điều đó, chúng ta cần thêm một thuộc tính data-label vào phần tử <div> và sau đó lấy giá trị của thuộc tính này để xây dựng URL của nguồn dữ liệu trong mã JavaScript. Dưới đây là cách thực hiện:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiển thị danh sách bài viết</title>
</head>
<body>
<!-- Phần tử div để hiển thị danh sách bài viết -->
<div id="post-list" data-label="Chân trời sáng tạo"></div>
<script type="text/javascript">
numposts = 5;
function showrecentposts(e) {
var postListHTML = ''; // Tạo một biến để lưu trữ HTML của danh sách bài viết
for (var i = 0; i < numposts; i++) {
var f = e.feed.entry[i];
var g = f.title.$t;
var h;
if (i == e.feed.entry.length) break;
for (var k = 0; k < f.link.length; k++) {
if (f.link[k].rel == 'alternate') {
h = f.link[k].href;
break;
}
}
var listItemHTML = '<p><a href="' + h + '">' + g + '</a></p>'; // Tạo HTML của mỗi bài viết
postListHTML += listItemHTML; // Thêm HTML của bài viết vào biến lưu trữ
}
document.getElementById('post-list').innerHTML = postListHTML; // Chèn HTML của danh sách bài viết vào phần tử div
}
// Lấy label từ thuộc tính data-label của phần tử div
var label = document.getElementById('post-list').getAttribute('data-label');
// Xây dựng URL của nguồn dữ liệu từ label
var script = document.createElement('script');
script.src = "https://lichsulop8.10tot.net/feeds/posts/default/-/" + label + "?max-results=" + numposts + "&orderby=published&alt=json-in-script&callback=showrecentposts";
document.body.appendChild(script);
</script>
</body>
</html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hiển thị danh sách bài viết</title></head><body><!-- Phần tử div để hiển thị danh sách bài viết --><div id="post-list" data-label="Chân trời sáng tạo"></div><script type="text/javascript">function showrecentposts(e) {var postListHTML = ''; // Tạo một biến để lưu trữ HTML của danh sách bài viếtfor (var i = 0; i < e.feed.entry.length; i++) {var f = e.feed.entry[i];var g = f.title.$t;var h;for (var k = 0; k < f.link.length; k++) {if (f.link[k].rel == 'alternate') {h = f.link[k].href;break;}}var listItemHTML = '<p><a href="' + h + '">' + g + '</a></p>'; // Tạo HTML của mỗi bài viếtpostListHTML += listItemHTML; // Thêm HTML của bài viết vào biến lưu trữ}document.getElementById('post-list').innerHTML = postListHTML; // Chèn HTML của danh sách bài viết vào phần tử div}// Lấy label từ thuộc tính data-label của phần tử divvar label = document.getElementById('post-list').getAttribute('data-label');// Xây dựng URL của nguồn dữ liệu từ labelvar script = document.createElement('script');script.src = "https://lichsulop8.10tot.net/feeds/posts/default/-/" + label + "?orderby=published&alt=json-in-script&callback=showrecentposts";document.body.appendChild(script);</script></body></html>
Đăng nhận xét