How can I pull the first 10 elements with a specific class name from another html file and display them on my frontpage?

Issue

I have a list of movies in an html file (call it "movies.html"), which looks like this:

<div class="movie">Content 1</div>
<div class="movie">Content 2</div>
<div class="movie">Content 3</div>
...

I want to pull and display the first 10 divs with the class name "movie", in my frontpage ("index.html"), so my frontpage would be automatically updated everytime I add another movie to the list in "movies.html".

How can I achieve this?

Solution

Use querySelectorAll to get all divs, and then use slice to get first n elements:

const AllMovies = document.querySelectorAll(".movie");  
var top10 = [...AllMovies].slice(0, 10);

Answered By - Shahram Alemzadeh