JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
			<li>lorem ipsum dolor <span>sit</span> amet 1</li>
			<li>lorem ipsum dolor <span>sit</span> amet 2</li>
			<li>lorem ipsum dolor <span>sit</span> amet 3</li>
			<li>lorem ipsum dolor <span>sit</span> amet 4</li>
			<li>lorem ipsum dolor <span>sit</span> amet 5</li>
			<li>lorem ipsum dolor <span>sit</span> amet 6</li>
		</ul>

		<p id="greeting">Hello <strong>World</strong>!</p>

JavaScript

$(document).ready(function(e){
			var list =  $("li");	//shoudn't this return an array of jquery objects?
			var greeting = $("#greeting");
			var content ="";
			for(var i=0, len = list.length; i<len; i++) {
				content += $(list[i]).html();	
                //why do I have to use the $ here instead  of just doing list[i].html
                //content += list[i].html(); why does this not work?
			}
			alert(content);
			alert(greeting.html());	//why does this work fine?
		});