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

by Jordan Marechal

HTML

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

<p>We're going to practice the steps of manually creating an adding a DOM element to a page. To do this, we'll create a DIV with id="myNewDiv" that contains some text, and attach it to the div already on this page with id="addNewOneHere". If you've done it right, it will appear with a red background.</p>
<p>Hint: There's five steps here, as shown in the lessons, particularly lesson 3 section 2, the TOC example in Video 8.6, and the <a href="http://javascript.info/tutorial/modifying-document#creating-elements" target="blank">readings on javascript.info</a>. You'll have to:
    <ol>
        <li>create a 'DIV' element node and assign it to a variable</li>
        <li>using setAttribute(), give it an ID attribute of "myNewDiv"</li>
        <li>creaze a text node with some text of your choosing, and assign it to a variable</li>
        <li>append you text node to your element</li>
        <li>append your new element to the existing div which has id="JordanID"</li>
    </ol>
    <div id="content">content</div>
    <li>This is my content</li>
    
    <div id="another div"></div>
    <li>This is another div</li>
    <div id= "do it now"></div>
    <li>do it now</li>
    
   
</p>
<div id="JordanID">This is the div where you'll add your new element using Javascript. This is my added text for this assignment.</div>

CSS

div#addNewOneHere div#myNewDiv {
    background-color:red;
}

JavaScript

// your solution here
//windows.onload = function() {
"use strick";
windows.onload = function() {


var content= document.getElementById("content");  // new div and element
var JordanID = document.getElementById("JordanID");  //new div and element

var JordanID = document.createElement("content");
document.body.appendChild(content);  // code for appending new text

alert("1"+JordanID);

document.getElementById("doit").onclick = function(){
content.innerHTML+="<div id='another div'>This is another div</div>";
alert("2"+JordanID);
};

}
//.onclick = function() {



}