JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li id="case_studies"></li>
</ul>

JavaScript

var xml = "<SiteNav><Work>" +
"<CaseStudies><NavImage>NavImage 1</NavImage><NavHeader>Header 1</NavHeader><NavDescription>Description 1</NavDescription><NavLink>Link 1</NavLink></CaseStudies>" +
"<CaseStudies><NavImage>NavImage 2</NavImage><NavHeader>Header 2</NavHeader><NavDescription>Description 2</NavDescription><NavLink>Link 2</NavLink></CaseStudies>" +
"<CaseStudies><NavImage>NavImage 3</NavImage><NavHeader>Header 3</NavHeader><NavDescription>Description 3</NavDescription><NavLink>Link 3</NavLink></CaseStudies>" +
"</Work></SiteNav>";
   
var cs = $("li#case_studies");
$(xml).find("CaseStudies").each(function() {
 cs.append('<ul><li>' + $(this).children().text() + "</li></ul>");
});