JSFiddle - React, Tailwind, and code Playground

by Rob Lardy

HTML

<div id="container">
     <h1>Hello, DOM!</h1>

    <p>This is some old fruit:</p>
    
    <ul class="old">
        <li>Apples</li>
        <li>Pears</li>
        <li>Cherries</li>
    </ul>
    
    <p>This is some fresh fruit:</p>
    
    <ul class="new"></ul>
    
</div>

JavaScript

// Follow the instructions for fetching and
// manipulating the html content
// using any of following jquery methods
// $(selector)
// .clone()
// .remove()
// .detach()
// .html()
// .before()
// .after()
// .prepend()
// .append()
// .prependTo()
// .appendTo()

// 1
// Create a NEW fruit list item, "Grapes" in the unordered list, ul.new




// 2
// Remove the "Pears" list item from the page entirely

// 3
// Move "Cherries" into the ul.new list as the last item

// 4
// Copy "Apples" into the ul.new list as the first item