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

by Lucille Kenney

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.)

console.log("This is an element of type: ", oldParent.nodeType );
console.log("children elements are: ", oldParent.children.length );
console.log("childNodes are:", oldParent.childNodes.length );
console.log("Inner HTML of oldParent before move is: ", oldParent.innerHTML );
console.log("Inner HTML of newParent before move is: ", newParent.innerHTML );

// Locate element by it's id and place it in a variable
var moveMe = document.getElementById("moveMe");
// Locate new location by element's id and appends to end of list
document.getElementById("newParent").appendChild(moveMe);

console.log("Inner HTML of oldParent after move is: ", oldParent.innerHTML );
console.log("Inner HTML of newParent after move is: ", newParent.innerHTML );