const dom = document.createDocumentFragment();
	let places = Array(2500);
	places = places.map((place) => {
		return {
			population: Math.floor(Math.random() * 1000000),
			city: Math.random().toString(36).substring(7),
			state: Math.random().toString(36).substring(7),
		};
	});
	const placesList = [];
	places.forEach((place) => {
		const placeItem = document.createElement("li");

		const placeName = document.createElement("span");
		placeName.classList.add("name");
		placeName.textContent = `${place.city},
	${place.state}`;

		// Add population stats
		const population = document.createElement("span");
		population.classList.add("population");
		population.innerHTML = place.population;

		// Add to li
		placeItem.insertAdjacentHTML(
			"beforeend",
			placeName.outerHTML + population.outerHTML
		);

		// Add to list of li's
		placesList.push(placeItem);
	});

	dom.append(...placesList);

	const placesElement = document.querySelector("ul.places");

	placesElement.appendChild(dom);