Practice Set, Week 8, Modifying the DOM, Problem 1

by Aboubacar Bah

HTML

<h3>Practice Set #1, Week 8, Modifying the DOM</h3>

<p>We're going to move a DOM element from one location to another in this HTML document. Your task is to remove the element <code>#moveMe</code> from <code>#oldParent</code> and add it to the element <code>#newParent</code>.</p>
<p>Hint: this may require fewer steps than you think. Read the first paragraph of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild" target="_blank">MDN Node.appendChild() docs</a> for guidance.</p>
<b>Dogs</b>

<ol id="oldParent">
    <li>Simon</li>
    <li id="moveMe">Baxter</li>
    <li>Ripley</li>
</ol>
<b>Famous Dogs</b>

<ol id="newParent">
    <li>Lassie</li>
    <li>Astro</li>
    <li>Scooby</li>
</ol>

JavaScript

// your solution here
// some suggested steps:
// 1)  Get the elements for the ids 'moveMe', 'oldParent', and 'newParent' and assign them to variables 
//       (You actually will not need all three of these, you only need two. Part of the task is to figure out which two. Refer to the MDN docs linked in the HTML for guidance.)

var element = document.getElementById("moveMe"); // Get the desired element


// 2) Now, use appendChild() to make the move happen.  
 
document.getElementById("newParent").appendChild(element);